4 ms·

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 mi

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!

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!