4 ms·

I needed something that provided sorting, filtering capability for a recent project. After searching high and low and trying a few options, I finally settled on

I needed something that provided sorting, filtering capability for a recent project. After searching high and low and trying a few options, I finally settled on datatables (http://datatables.net/ http://datatables.net/). It is incredibly feature rich and works very well for my use case. Sorting is great functionality but if you really want adoption, I suggest you add the richness required by a variety of use cases. . Sorting . Filtering (regex, case etc) . Searching (column or full table) . Show/Hide columns I don't mean to undermine to work put in here. It looks great and good luck.

zackbloom 13y ago
I would take a look at http://listjs.com/ http://listjs.com/. Datatables can be... difficult.
- periferral 13y ago
  I did look at lists.js and actually started my project with it. It seemed the best at the time. However, I soon realized the filtering capabilities were limited (eg running multiple filters at the same time). I can't remember some other challenges I had at the time. Also, datatables has a large user base which means you can find many examples of it on stackoverflow or other such sites. Lists.js on the other hand has limited examples on their site and even fewer in the wild. I'm not an everyday programmer and needed all the help I could get. Also, considering I'm not a developer, I found datatables quite easy to use.
  - SloopJon 13y ago
    I use Tablesorter for a report. It does a pretty good job with multi-column sorting, but adding the filters that I need has been a bit of a chore. Your comment prompted me to take another look at DataTables. So far I'm impressed. I think it will simplify my code and help clean up some long standing bugs, mainly by replacing some of my CSS visibility hacks with filter callbacks.
afschwartz 13y ago
See my earlier comment (https://news.ycombinator.com/item?id=6841944 https://news.ycombinator.com/item?id=6841944) for more info, but yeah, we agree. With most of our open-source projects at HubSpot (http://github.hubspot.com http://github.hubspot.com), we've tried to keep things modular and small, doing one thing as well as it possibly could be done. Adding filtering and searching (fuzzy, regex, etc.) is definitely something we'd like to add. (https://github.com/HubSpot/sortable/issues/4 https://github.com/HubSpot/sortable/issues/4) ;)
JangoSteve 13y ago
We haven't officially announced it yet, but we've been working on a sort of replacement for datatables, that's more fun to use and easier to customize, called Dynatable. It also has searching, filtering, and paginating, and supports using templates for reading and rendering, such that it could be used to make interactive lists, grids, charts, etc. http://os.alfajango.com/dynatable http://os.alfajango.com/dynatable if you're interested in checking it out. EDIT: I don't mean to hijack this thread to just plug our project, just seemed relevant to the parent content. I actually really like the idea of modular single-purpose javascripts that are really well done. The issue becomes when each library has to duplicate functions from other libraries due to them being intended for individual use. For example, I imagine a lot of functions in listjs that duplicate some of the functions in jquery (I haven't actually looked through the individual functions in listjs yet, so this is just conjecture), which is great for the times when you're not using jquery, but other times, it's just a bunch of duplicated code.
- periferral 13y ago
  This looks very good. I'll consider this for my next project. A few things I really like 1. Applies to tables, lists etc 2. Nice progress indicator. This is missing in datatables and is a pain point in my current deployment. 3. stylized lists and charts. Very cool what i didnt see 1. filtering. eg: find in column x where string not equal to blah 2. Searching specific column rather than entire table. I apologize if this exists and I missed it. Overall, look great. Best wishes on this.
  - JangoSteve 13y ago
    Awesome thanks! what i didnt see 1. filtering. eg: find in column x where string not equal to blah 2. Searching specific column rather than entire table. See the "Year" and "Max Price" examples at the bottom of the "Querying" sub-section under "Operations", right before "Pagination". You would do that by adding your own query function: $('#my-table') .bind('dynatable:init', function(e, dynatable) { dynatable.queries.functions['myQueryName'] = function(record, queryValue) { return record.myAttribute != queryValue; }; }) .dynatable(); Then, you'd invoke the query like this: dynatable.queries.add('myQueryName', 'hello'); dynatable.process(); And that will execute your query function which finds all records for which `myAttribute` is not equal to "hello". Of course, you'd need to bind the above query execution to some user input, like the `change` event of a text field or something like that, and instead of 'hello', you could pass in the value of the input. This is a common scenario, so dynatable provides a shortcut to this style of invocation of your custom query functions by passing dom elements to the `inputs` config option. So, you could replace both of the above with this: var dynatable = $('#my-table') .bind('dynatable:init', function(e, dynatable) { dynatable.queries.functions['myQueryName'] = function(record, queryValue) { return record.myAttribute != queryValue; }; }) .dynatable({ inputs: { queries: $('#my-input') } }); This will now cause the `myQueryName` function to be run on the dataset with the value of the `#my-input` dom element and process the results on the `blur` or `change` events of that dom element (the events that trigger the query processing can be changed via the `inputs.queryEvent` config option). I think this answers both of your questions. If there's a different sort of syntax you had in mind for providing an easier or more straight forward way of doing this, please let me know!

zackbloom 13y ago

I would take a look at http://listjs.com/ http://listjs.com/. Datatables can be... difficult.

periferral 13y ago
I did look at lists.js and actually started my project with it. It seemed the best at the time. However, I soon realized the filtering capabilities were limited (eg running multiple filters at the same time). I can't remember some other challenges I had at the time. Also, datatables has a large user base which means you can find many examples of it on stackoverflow or other such sites. Lists.js on the other hand has limited examples on their site and even fewer in the wild. I'm not an everyday programmer and needed all the help I could get. Also, considering I'm not a developer, I found datatables quite easy to use.
- SloopJon 13y ago
  I use Tablesorter for a report. It does a pretty good job with multi-column sorting, but adding the filters that I need has been a bit of a chore. Your comment prompted me to take another look at DataTables. So far I'm impressed. I think it will simplify my code and help clean up some long standing bugs, mainly by replacing some of my CSS visibility hacks with filter callbacks.

afschwartz 13y ago

See my earlier comment (https://news.ycombinator.com/item?id=6841944 https://news.ycombinator.com/item?id=6841944) for more info, but yeah, we agree. With most of our open-source projects at HubSpot (http://github.hubspot.com http://github.hubspot.com), we've tried to keep things modular and small, doing one thing as well as it possibly could be done. Adding filtering and searching (fuzzy, regex, etc.) is definitely something we'd like to add. (https://github.com/HubSpot/sortable/issues/4 https://github.com/HubSpot/sortable/issues/4) ;)

JangoSteve 13y ago

We haven't officially announced it yet, but we've been working on a sort of replacement for datatables, that's more fun to use and easier to customize, called Dynatable. It also has searching, filtering, and paginating, and supports using templates for reading and rendering, such that it could be used to make interactive lists, grids, charts, etc. http://os.alfajango.com/dynatable http://os.alfajango.com/dynatable if you're interested in checking it out. EDIT: I don't mean to hijack this thread to just plug our project, just seemed relevant to the parent content. I actually really like the idea of modular single-purpose javascripts that are really well done. The issue becomes when each library has to duplicate functions from other libraries due to them being intended for individual use. For example, I imagine a lot of functions in listjs that duplicate some of the functions in jquery (I haven't actually looked through the individual functions in listjs yet, so this is just conjecture), which is great for the times when you're not using jquery, but other times, it's just a bunch of duplicated code.

periferral 13y ago
This looks very good. I'll consider this for my next project. A few things I really like 1. Applies to tables, lists etc 2. Nice progress indicator. This is missing in datatables and is a pain point in my current deployment. 3. stylized lists and charts. Very cool what i didnt see 1. filtering. eg: find in column x where string not equal to blah 2. Searching specific column rather than entire table. I apologize if this exists and I missed it. Overall, look great. Best wishes on this.
- JangoSteve 13y ago
  Awesome thanks! what i didnt see 1. filtering. eg: find in column x where string not equal to blah 2. Searching specific column rather than entire table. See the "Year" and "Max Price" examples at the bottom of the "Querying" sub-section under "Operations", right before "Pagination". You would do that by adding your own query function: $('#my-table') .bind('dynatable:init', function(e, dynatable) { dynatable.queries.functions['myQueryName'] = function(record, queryValue) { return record.myAttribute != queryValue; }; }) .dynatable(); Then, you'd invoke the query like this: dynatable.queries.add('myQueryName', 'hello'); dynatable.process(); And that will execute your query function which finds all records for which `myAttribute` is not equal to "hello". Of course, you'd need to bind the above query execution to some user input, like the `change` event of a text field or something like that, and instead of 'hello', you could pass in the value of the input. This is a common scenario, so dynatable provides a shortcut to this style of invocation of your custom query functions by passing dom elements to the `inputs` config option. So, you could replace both of the above with this: var dynatable = $('#my-table') .bind('dynatable:init', function(e, dynatable) { dynatable.queries.functions['myQueryName'] = function(record, queryValue) { return record.myAttribute != queryValue; }; }) .dynatable({ inputs: { queries: $('#my-input') } }); This will now cause the `myQueryName` function to be run on the dataset with the value of the `#my-input` dom element and process the results on the `blur` or `change` events of that dom element (the events that trigger the query processing can be changed via the `inputs.queryEvent` config option). I think this answers both of your questions. If there's a different sort of syntax you had in mind for providing an easier or more straight forward way of doing this, please let me know!