DataTables for quick in-table search

[narrativecraig]

In the past I have had a lot of success using DataTables to enhance HTML tables with search, column sorting, etc.

It's a pretty quick, lightweight change and could complement the simple SQL search that currently exists in amy. Would this be worth implementing?

[wking]

On Thu, Jan 08, 2015 at 06:42:47PM -0800, Craig Booth wrote:

In the past I have had a lot of success using DataTables…

Personally, I like either no JavaScript, or a full-blown framework (like AngularJS). Going the Django API + AngularJS route seemed a bit heavy handed for amy at the moment, so I'm fine with using a jQuery plugin if we want to assemble our JavaScript widgets in smaller chunks (e.g. I floated bootstrap-datepicker as part of #110 [1,2]).

Tooling thoughts aside, I don't have strong preferences for whether we have sortable tables or not.

[gvwilson]

Sortable tables would be nice, particularly for search results, but I don't know enough to choose between DataTables, Angular.js, and what-not.

[pbanaszkiewicz]

I really like the idea of having these tables in AMY. My only concern: is this really going to be lightweight? DataTables (or something very similar) in Google Summer of Code homepage (about 1.4k records, for example: http://www.google-melange.com/gsoc/projects/list/google/gsoc2014) are awefully slow.

EDIT: now when I think about it, the reason might be GSoC doesn't use pagination for their tables.

[wking]

On Sat, Jan 10, 2015 at 05:23:20AM -0800, Piotr Banaszkiewicz wrote:

I really like the idea of having these tables in AMY.

Is this “I'd rather be sorting the results with the backing SQL engine”? That makes sense to me, but getting a nice UI in front of that isn't as easy as dropping in DataTables. I'm fine going either way here and then re-opening the discussion if we start bumping into problems.

[pbanaszkiewicz]

@wking:

Is this “I'd rather be sorting the results with the backing SQL engine”?

No, I'm +1 for DataTables and +1 on re-opening the discussion if any errors occur.

[craigmbooth]

@wking Re: Angular. I'm in total agreement that Angular is way too heavyweight for this particular project, and that a few well-chosen jQuery plugins can probably give us very much functionality without much in the way of work. bootstrap-datepicker is another example of this 'low hanging fruit' functionality that I'd be totally happy to see brought in via jQuery.

@pbanaszkiewicz Yeah, the GSoC thing seems like a very heavyweight solution, I've dealt with ~1000s of lines in DataTables before and everything was much more performant than that page. However if we did ever get into a situation where tables were so big that there was latency, I'd just add some logic to the template like "if n_rows > THRESHOLD {render basicTable and a message that you need to refine a search } else {render sortableTable}"

I have gone ahead and implemented DataTables on one single page (all_airports) so that people can get a feel for how it works. If everybody seems happy I'll go ahead and update it everywhere.

Link to the pull request will follow shortly here...

[gvwilson]

Thanks Craig - much appreciated.

[pbanaszkiewicz]

I'm stuck with DataTables, unfortunately.

1. Our listing views are very slow (up to 10s to load 1 page) if we generate all objects and then return them via AJAX or JSON-embedded in HTML source.
2. The solution would be to use server-side processing, ie. do filtering and sorting on our end, not in DataTables (so we use one nice feature of DataTables, ie. effortless sorting and filtering).
3. To do it right we would need JSON serializers and some generic view to handle processing.
4. And we loose nice formatting of the table entries (ie. links, "—", etc.; we have to rewrite them in JS).
5. Two options from here: (A) switch to tastypie / rest-framework (since they have JSON serializers) and write generic view (unless there's some magical option that enables tastypie/rest-framework to work with DataTables as server processing), or (B) write our own serializers and generic view.

I like neither of these options, but if we want DataTables we need to either optimize our views or use server-side processing.

[gvwilson]

As an intermediate step for Version 0.4, how about adding filter parameters to URLS, so that (for example) http://amy.software-carpentry.org:8080/workshops/events?organizer=software.ac.uk does what you'd expect.

[pbanaszkiewicz]

@gvwilson there's an awesome django-filter application. I've just tested it and it worked great. I'll submit a PR soon…

[gvwilson]

When in doubt, move the goalposts :-)

[pbanaszkiewicz]

How do you like it?

I bet @wking is delighted :-)

[gvwilson]

Nice!

[wking]

On Tue, Jun 16, 2015 at 02:34:50AM -0700, Piotr Banaszkiewicz wrote:

I bet @wking is delighted :-)

Yup, looks good to me :). +1 for finding a generic, external library to do the work for you ;).