wootapa / watable Goto Github PK
View Code? Open in Web Editor NEWA jQuery table plugin with sorting, paging, filtering.
Home Page: https://oweitman.github.io/watable/doc/index.html
License: MIT License
A jQuery table plugin with sorting, paging, filtering.
Home Page: https://oweitman.github.io/watable/doc/index.html
License: MIT License
In the appspot documentation, in the "Column Options" help, there's a typo:
placeHolder
is misspelled with a lower-case H. Using the property with that spelling causes it to be ignored, of course.
(I would have done this as a pull request but the appspot pages don't appear to have a repo here.)
Hello Andreas,
first of all: Thank you very much. This is a great table-plugin!
But is this project still maintained? I do not see any process, actually.
Would be nice to know. If you dont, maybe it is possible to take over further development?
Tanks and Greetings!
Watable Version: 1.07, Browser - Firefox 25.0
With all required dependencies.
Code:
function getData(){var e={sNo:{index:1,type:"number",friendly:"<i class='icon-user'></i>",format:"<a href='#' class='userId' target='_blank'>{0}</a>",unique:true,sortOrder:"asc",tooltip:"This column has an initial filter"},agentName:{index:2,type:"string",friendly:"Agent Name"},lastUpdated:{index:3,type:"string",friendly:"Last Updated"},unixEpoch:{index:4,type:"number",friendly:"Unix Time",tooltip:"Used for sorting"}};var t=[];var n=1;while(n<=3){var r={sNo:n,agentName:"India Vs WI",lastUpdated:"3 seconds ago",unixEpoch:43098398};t.push(r);n++}var i={cols:e,rows:t,otherStuff:{thatIMight:1,needLater:true}};return i}$(document).ready(function(){var e=$("#div1").WATable({types:{string:{},number:{decimals:1},bool:{},date:{utc:true,datePicker:true}},actions:{filter:true,columnPicker:true,custom:[$('<a href="#" class="refresh"><i class="icon-refresh"></i> Refresh</a>'),$('<a href="#" class="export_all"><i class="icon-share"></i> Export all rows</a>'),$('<a href="#" class="export_checked"><i class="icon-share"></i> Export checked rows</a>'),$('<a href="#" class="export_filtered"><i class="icon-share"></i> Export filtered rows</a>')]},tableCreated:function(e){console.log("table created");console.log(e)},rowClicked:function(e){console.log("row clicked");console.log(e);if($(this).hasClass("userId")){e.event.preventDefault();alert("You clicked userId: "+e.row.userId)}},columnClicked:function(e){console.log("column clicked");console.log(e)},pageChanged:function(e){console.log("page changed");console.log(e)},pageSizeChanged:function(e){console.log("pagesize changed");console.log(e)}}).data("WATable");var t=getData();e.setData(t);var n=e.getData(false);var r=e.getData(true);var i=e.getData(false,true);$("body").on("click",".refresh",function(t){t.preventDefault();var n=getData();e.setData(n,true)});$("body").on("click",".export_checked, .export_filtered, .export_all",function(t){t.preventDefault();var n=$(t.target);var r;if(n.hasClass("export_all"))r=e.getData(false);else if(n.hasClass("export_checked"))r=e.getData(true);else if(n.hasClass("export_filtered"))r=e.getData(false,true);console.log(r.rows.length+" rows returned");console.log(r);alert(r.rows.length+" rows returned.\nSee console for details.")})})
See screenshot below:
Is it possible to load data in a lazy way? Having a virtual row length of i.e. 10.000 and loading sets of e.g. 5 * pageSize rows.
If not so that would be a nice feature.
Sorting over the whole set could be done on the data server, filtering may be only local.
I know this Issue was reported earlier, but I have not been able to solve this.
Attempting to use watable when importing jquery-ui as a script causes the table to become unresponsive after a column sort.
Example: http://jsfiddle.net/3DRAa/
Note that after clicking "score" once, it sorts the column. clicking "score" a second time has no effect, and now the filtering no longer works; if i had more pages, you would see that the pagination no longer works either.
Console shows the following:
Uncaught Error: cannot call methods on tooltip prior to initialization; attempted to call method 'hide'
[email protected]:250
(anonymous function)@jquery-ui.js:502
[email protected]:374
[email protected]:139
$.widget.bridge.$.fn.(anonymous function)@jquery-ui.js:494
[email protected]:229
[email protected]:1321
[email protected]:4430
[email protected]:4116
Below you may find the versions I'm using:
Removing jquery-ui from the imports on the above jsfiddle will fix the behaviour.
Could this be a clash between bootstrap-datepicker and jquery-ui's datepicker?
Is there a way to disable date-picker?
Hi, I've just try watable with bootstrap 3.0.2 and I have a slight rendering problem as you can see in this jsfiddle.
Am I doing something wrong or there is a bug with latest bootsrap?
Thanks for your great job.
It would be great to have a "time" column data type with filtering that works like:
..00:10:00 //lower than 10 mins
00:05:00..00:10:00 //between 5 and 10 mins
etc...
=)
thank you!
Attempting to use watable when importing jquery-ui as a script causes the table to become unresponsive after a single column sort.
Example: http://jsfiddle.net/3DRAa/
Note that after clicking "score" once, it sorts the column. clicking "score" a second time has no effect, and now the filtering no longer works; if i had more pages, you would see that the pagination no longer works either.
Javascript errors in firefox js log:
[22:50:00.879] Error: cannot call methods on tooltip prior to initialization; attempted to call method 'hide' @ http://code.jquery.com/jquery-1.10.1.js:516
[22:50:00.881] Empty string passed to getElementById(). @ http://code.jquery.com/jquery-1.10.1.js:174
Removing jquery-ui from the imports on the above jsfiddle will fix the behaviour.
Could this be a clash between bootstrap-datepicker and jquery-ui's datepicker?
I'm looking into alternatives to DataTables, and came across Watable. The one thing that prevents me from being able to switch at the moment is the fixed header feature of DataTables. In DataTables you can set sScrollX and sScrollY parameters to change the size of a table, and if it is larger than the specified values, there is scrolling as well as a fixed header.
Is this something that you have planned to add, if not, would it be possible to have this added?
I created a ajax loaded table, when I change page or sort the table, page is scrolled on top.
those are my settings:
http://pastebin.com/FWVmZhjF
and the init:
http://pastebin.com/xnFrQLdT
I can provide sample of the data I'm using, if needed
Hey @wootapa,
do you mind adding a LICENSE file? I would love to use your watable :)
This would be an awesome improvement. Similar to many other plugins that use i18n standards to extend the language used.
Which class are needed from that css?
Including the whole file is impossible; is it possible to know which class are you using?
Regards
I try add button to cell for delete a row in table. When click to button, it call priv.deleteClicked with unique of row, and i find row then delete. it's not work. Can you help me.
priv.deleteClicked = function(e){
if(typeof priv.options.rowActionDelete == "function"){
var row = _data.meta.rowsLookup[e.data.unique].row;
delete _data.row[e.data.unique];
priv.options.rowActionDelete(e.data.unique);
}
};
Also if the project is interesting, a little bit of documentation is likely to help who want to use it.
If the documentation is present somewhere, can be a good idea to link it
if a number is 0.50, 102.00, 118.50, 18, 198.80, 20, 30, ..... either the sorting will be as it or it will be in reverse order, the actual sorting should be 0.50, 18, 20, 30, 102.00, 118.50, 198.80
Even if i set to decimal:2 and type: number, there is no impact.
since the documentation is no longer available on http://wootapa-watable.appspot.com/, i have restored the help with fake api-requests on
https://oweitman.github.io/watable/doc/index.html
There is a Bower package 'watable' pointing to some other repository which is not being maintained. Plus the other repository looks like a copy of this one. Suggest getting the bower name or releasing it in Bower with a slightly different name.
It would be great if there was an option to show column sums of the current page in the footer. Obviously this should only work for numeric columns.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.