3 ms·

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 D

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!

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!