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 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.

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.

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!

See my earlier comment (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), 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) ;)

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

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.

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.