

Sort tables fast with Sortable.js - afschwartz
http://github.hubspot.com/sortable/docs/welcome/?hnd2

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

~~~
JangoSteve
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
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
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
I turned it into a bookmarklet which will make every table on a page sortable,
if anyone's interested:
[https://gist.github.com/zackbloom/7774909](https://gist.github.com/zackbloom/7774909)

------
sehrope
The "sorting" aspect of it is wrong, 2.44% is greater than 1.03% but shows up
last: [http://i.imgur.com/0qmIk3s.png](http://i.imgur.com/0qmIk3s.png)

EDIT: I took a look at the source. There's an extra "data-" field to use as
the value to sort with which is hard coded to "0" for the 2.44% row. This also
answers my question of how it was sorting the textual date fields properly
(each has the year in that data- field).

~~~
afschwartz
This is intentional. Since that is an "Other" category, I elected to force it
to the bottom of the sort order by setting `<td data-value="0">` for that
column.

See:
[https://github.com/HubSpot/sortable/blob/e07209b89deac83950c...](https://github.com/HubSpot/sortable/blob/e07209b89deac83950cd1e83e4f5bc3796449dcf/docs/welcome/index.html#L266)

------
orware
I've been using the original sorttable.js you reference on your GitHub page
for my own product for a number of years.

How does yours differ from that one in terms of features/capabilities?

Is it a rewrite with more modern techniques?

~~~
afschwartz
Yea, more-or-less.

Here is a short summary of some of the major changes:

– Tables with `data-sortable` attribute are automatically initialized.

– The sort arrows are made with CSS-border triangles instead of special
characters.

– The sort arrows are always present but hidden for non-sorted columns so that
columns don't resize when sorting.

– `sorttable_`-prefixed class names are now `data-` attributes, so they are
valid HTML5.

– The library doesn't attempt to recognize date formats. Instead, it
recommends you add `data-value="#{ timeInMillis }"` to your <td> containing a
human-readable date string.

I'm sure there are more that I can't think of at the moment, but that's a
decent list.

~~~
orware
Thanks for the replies guys, one additional question I had which I didn't see
directly answered would be the type of browsers it should be compatible with
or was tested on? The main page shows some browsers listed but I think that
was simply demonstration data to show off the script and wasn't actually
showing the versions it was supposed to support.

~~~
afschwartz
Browser support is listed in the documentation
([http://github.hubspot.com/sortable](http://github.hubspot.com/sortable)):
IE8+, Firefox 4+, Current WebKit (Chrome, Safari), Opera.

~~~
orware
Great, thanks! The Internet Explorer one was the one I was probably most
curious about. I'll have to give it a test go and see if I can go ahead and
use it to supplant the older sorttable in my script ;-).

------
polskibus
please create a "filterableandsortable.js" too ;)

~~~
afschwartz
It's a fair criticism. We really wanted to nail the very common use case of:
"I put a small table in a blog post and I want it to be sortable and look
good."

But I think you're right that it would be great to have a pairable tool which
adds filtering and possibly another which adds client-side pagination.

~~~
polskibus
Tere's also "keep my table headers frozen" functionality that's often
requested along sorting, filtering and pagination.

~~~
afontaine
This was a huge point for me when using the old tablesorter script. They had a
plugin called StaticRow that would allow you to add the "static" class to a tr
tag and it didn't change when sorting. Did you guys implement that too?

~~~
zackbloom
This library supports that if your static row is the header (uses th tags).

