Range selector on multiple columns

EricBuist

Hi,

I am trying to build a page containing a few DataTables with filters allowing to restrict rows by value range. The layout of the tables are not all the same. Some have more columns, some have less. I was able to add <input> elements to <th> elements selected by class, so only columns I mark as needing a select-filter get one. However, DataTables offers no builtin way to filter numeric values by range, so I cannot use the columns().search() functionality as I did for filtering on text-based or categorical columns.

The example https://datatables.net/examples/plug-ins/range_filtering.html gives a way to implement this, but it has several limitations. First, it hard-codes the column indexes. Moreover, it assumes each column i of each table on my page will need the same treatment. But my first table has no numerical column, second one has four of them, third and fourth tables have one.

The plugin API used in the example is not so well-documented. I cannot figure out exactly the meaning of the callback arguments. The first, called settings, contains some settings that I may be able to use to identify the table being treated and then I could map that table ID to a list of column indexes. Second argument, data, seems to hold an array. I could potentially traverse the array and filter on each element that parses as a number, but that's not totally robust. The third argument, dataIndex, is of no use here.

I could tweak the render callback of the columns on which I want range filtering to return some special marker that the filter plugin could use, assuming the plugin receives in its data argument the result of the "filter" facet of the render. If I get the "display" facet or, even worse, the raw data, that is of no help. I'll have to test to see.

As a last resort, I could try to assemble a regexp that would match any number greater than a threshold, any number smaller than a threshold, or any number in a range, and toss it into column().search(). I can think of two ways of doing this. The first is a crude one that just traverses the rows and lists every unique match. That may work for small to medium tables, but at some point, I will end up with a string blowing up JavaScript regexp engine or making it ridiculously slow. It's possible that if my table reaches that limit, I would be better off using server-side processing. A second solution is to craft a regexp based only on the bounds of my range. I am starting to think it is possible, but it will be tricky. There will be several corner cases to cover, and I'm not sure the result will be efficient at all.

Any idea?