There are all kinds of JQuery widgets that offer some nice features like sorting by a columns (like http://tablesorter.com/docs/ or http://www.datatables.net/)
I haven't found one that integrates with server side sorting though. I have the following requirements:
sort by clicked column (server side sort)
filter by a text field over each column
selectable which columns to display
any suggestions on a widget that has some or all of these criteria?
thanks
Honestly, I would prefer to roll my own in this situation. Filtering is especially easy using jQuery: $('tr > td.columnName').each(...); just set the display style of the row to none if it doesn't match, block otherwise. Hiding columns can be done in a similar manner. Sorting isn't too bad--though notably more complicated. You need to sort (which can take a while, depending on your algorithm) and then place the rows into the table in the order you determined.
Alternatively, find a plug-in that has sorting accomplished, but also generates simple markup, so you can extend it with your own filtering.
As a step up from rolling your own (which is not a bad suggestion, BTW), try this jQuery plugin out: Ingrid. The descriptions of the code talk about using server side data generation.
I think DisplayTag is your solution. It was used to display data for servlets, portlets and it supports a lot of functions like paging, sorting on server side.
Try Tiny Table.
It does not require jQuery but you put a wrapper around it.
http://www.leigeber.com/2009/03/table-sorter http://www.leigeber.com/2009/03/table-sorter
(source: leigeber.com)
Related
I currently have a client-sourced table with individual column select drop-downs that work amazing. I have about 1000 rows and the performance is great. Amazing jQuery plug-in. Problem: my client just told me that this could grow to upwards of 40000 in a month. My client also told me that they really like the individual select filters in the footers and I can't remove them. Hence, I am worried about performance. See here if you don't know what I'm talking about when I say individual select filters:
https://datatables.net/examples/api/multi_filter_select.html
I was poking around and I saw the example here using client side and deferred rendering:
https://datatables.net/extensions/scroller/examples/initialisation/large_js_source.html
But the issue is I don't believe I can use deferred rendering since the client wants the individual column select filters. I have to load up all the data for the select filters to even work...
Does anyone have any idea how I can accomplish this behavior of individual column filtering with good speed at high number of rows or suggest a reasonable alternative? I feel like I am reaching the limitations of the software/browser here...
Thanks!
Julian
40000 rows of data is a lot, just to be transferred from server to browser. It will slow down page load.
I would execute filter on server side, and output only first (say 1000) rows, so they can be more manageable for the browser, and saves a lot of bandwidth. But that also means more JavaScript and SQL coding.
I need a list of all tables that have jQuery DataTables applied. I searched the docs and the API but I could not find an array or something like that that holds the tables.
You're looking for $.fn.dataTable.tables() - DataTables's static function.
It can be useful to be able to get a list of the existing DataTables
on a page, particularly in situations where the table has scrolling
enabled and needs to have its column widths adjusted when it is made
visible. This method provides that ability.
I've found a few plugins that does this, but they either have more than what I want which gets in the way and none of them do exactly what I need. Some I simply can't get to work with firebug showing syntax errors in the style sheets even though it seems perfectly fine.
I want something very simple in terms of visuals. Basically I want this:
http://demos.devexpress.com/aspxgridviewdemos/groupingsorting/grouping.aspx
If you look at the link then you will see that you can re-order the columns by dragging the headers, but you can also drag the headers out to where it says "Drag a column header here to group by that column"
I just want a plain way to do this in javascript/jquery with some callback so I can store the column order in an array after you change the order. The data changes I can handle, it's the dragging of the columns and then changing the order or removing the column and adding it to the Group space above that I have issues with.
We actually do you devexpress controls, but for what we're doing it's to slow with all the callbacks their grid needs to do when you do anything on the thing. So we're in the process of creating our own ajax grid that does what we want and how we want it with only what we need.
I hope this makes sense and that someone can help.
I have recently looked at implementing something similar, so while I can't post a code example, I'd recommend looking at jQuery UI Draggable to let you drag the columns to where you want them.
Make the table column order configurable through javascript first. Then make the column headings draggable and based on the new position redraw the table based on the new column layout.
This approach should be faster as you can optimise for your use cases.
Cocoa Touch's UITableView allows a user to scroll through large numbers of data rows with good performance because it recycles table rows. Rather than create a GUI element for every single data row, a limited number of table rows is created, and simply updated with the relevant data as the user scrolls, giving the illusion of navigating up and down a very large number of table rows.
Has anyone seen this done in javascript? Is there a plugin available anywhere that will do this for me?
infinity.js works well. It will dynamically load 'pages' behind the scenes giving you the appearance that the list has been fully loaded.
More information can be found on their Github page - https://github.com/airbnb/infinity
Additionally, I've forked the project updating it to work with Zepto. I also set it up to use any scrollable div (set up with overflow: scoll) with the class 'scrollable' - https://github.com/elliotcw/infinity
I should add that I made these changes as this is great for large lists on mobile devices, which slow down when you have to many complex elements on the page.
I was looking for this as well, and infinityjs [1] doesn't seem to quite mimic the same interface as UITableView. And it was a problem for my scenario that infinityjs required that the element containing the list items already be added to the DOM.
MegaList [2] came closest to what I wanted. Andrew (author) has done a great job of designing it for mobile first, with touch support etc. One caveat for me was that it appears to assume a strict selection list model and does a little bit more than I'd like a list component to do (e.g. binding to resize events and trying to handle that automatically).
So I started writing a barebones list component, also modeled after the iOS UITableView. It's a work in progress and I'm putting in just what I need. Sources are here https://github.com/shyam-habarakada/js-virtual-list-view. I'm putting in just what I need as I go, and contributors are needed :-)
[1] http://airbnb.github.io/infinity/
[3] https://github.com/triceam/MegaList
Actually the algorithm is not difficult at all. If you know javascript you should be able to write this. The algorithm only needs the height of a cell and the height of the table.
I only know these two:
Apple's Dashcode javascript Framework has an implementation of a Table. You could take a look and see if that is what you need.
Or Cappuccino Framework which is basically Objective-J but behind the scenes is Javascript.
Clusterize.js does exactly that.
It's small and works with any tag (table, lists, divs)
I want to add paginated table to a page. It should be 2 rows by 4 columns. Each cell contains a thumbnail image and some small links.
We're using YUI elsewhere on the project, so I'd like to use the Datatable. All the examples I see are geared around tabular data (understandable), but my hunch is that I can rewrite the HTML of each cell using Javascript. I don't see the callback function I should hook to rewrite the cells.
Possible? Or am I trying to hammer in a nail with a screwdriver? If there's a simpler way to do this with YUI I'd love to hear about it.
thanks!
jcooper,
To paginate a simple grid of image/text elements, I'd almost prefer to see you use the Paginator without using DataTable. DataTable is a powerful component, but it's working hard to be a lot of things you don't need.
Carousel (http://developer.yahoo.com/yui/carousel/ ), on the other hand, seems like it's trying to be just what you want. http://developer.yahoo.com/yui/examples/carousel/csl_imagentext.html , for example, might be a good place to start.
If that's not quite what you want, you could definitely do this with DataTable. Just create the markup snippets you want to use for each cell, store them in an array, and follow the directions for using an array datasource and pagination.
Regards,
Eric