Column filtering function with passed parameters

maxresig

Hi all,

Description of problem:
I want to implement a function which can genericaly be used to filter specific columns (several columns at a time subsequently) with some passed search-parameters.

I found quite some examples using $.fn.dataTable.ext.search.push, e.g. those:
https://datatables.net/manual/plug-ins/search
https://datatables.net/examples/plug-ins/range_filtering.html
http://live.datatables.net/heyaveme/1/edit

The problem is: The function which is pushed via $.fn.dataTable.ext.search.push can not take further parameters when calling table.search(), it is just automatically run everytime you draw() the table.

For my example, I need a search function which checks whether a value in a specific column is numeric and if it is, whether it is in a specific range (between min/max range) - and as I will have several sliders I need this function to be "generic". The examples above have just one min and one max input field and run on a specific column. But my content comes from a DB, hence there might be N sliders which should filter specific columns.

Link to test case:
My small test case would be:
http://live.datatables.net/hixetozu/1/edit?html,js,output

As you can see, I want to initialize several sliders, for all the input fields with class "js-range-slider". The data-colidx refers to the column index which should be filtered. The ionRangeSlider() function has a "onFinish" callback, as you can see, which gives me the min/max value from the slider - but HOW to filter the specific column with those values, as the previously described function pushed via $.fn.dataTable.ext.search.push is hardcoded ... so how is it supposed to filter N columns!?

Thanks so much!

kthorngren

You can create multiple search plugins like this example:
http://live.datatables.net/rosahuka/1/edit

This results in an AND search.

If you want an OR search you can combine all the inputs into one plugin, like this example:
http://live.datatables.net/mucevape/1/edit

Kevin

maxresig

Thanks, that kinda helps.

I only know all the Sliders which will be there on my page at runtime, because it comes from a database where a user can configure what type of numeric fields will be present. So maybe there will be 4 numeric columns, i.e. 4 sliders with each a Min and a Max value. But also may more or less sliders.

So I suspect I'd have to do a jQuery Loop over all the available ".js-range-slider" elements and for every of those (which are in fact sliders), push one search function which references the appropriate index within searchData[idx], as I want to have them with a AND selection.

Does the index "idx" of searchData[idx] refer to the original column order or does it take into account the ColReordering? Because if I may activate ColReordering in future, I'd only know the original colidx for all my search functions which I create once at runtime... If idx refers to the reorderer index, any way to tell which index was the original one?

Thanks!

kthorngren

Use colReorder.transpose() to get the column index based on the colReorder order. See this example:
http://live.datatables.net/wujegivi/1/edit

Move the Name column to see the index change. Note you also need to get an instance of the API.

Kevin

maxresig

Hi Kevin,

about my original question, I got it working now by the following only using ONE search.push function.

1. Create a global variable let rangeSearches = {}; which holds the min/max values for every column index.

2. Create ONE new search function which iterates over the stored intervals for the selected columns.

3. If the Slider is moved, simply update the global rangeSearch var and redraw the table.

Like this:
http://live.datatables.net/beyekenu/1/edit

Doesnt work properly online because of the mouse being "stuck" to the slider, but locally it is fine.

What do you think about the code? Makes sense to you or do you see improvement potential?

The code is without the Reordering Transposition, I will look into that now

kthorngren

What do you think about the code? Makes sense to you or do you see improvement potential?

Looks pretty simple

Kevin

maxresig

Just for the sake of completeness, in case someone else needs it in future.

For the reordring part, instead of going in my last posted code:

rangeSearches[colidx] = [min, max];

I changed this line of code like the following, deleting the original colidx and storing the transposed one.

delete rangeSearches[colidx];
rangeSearches[table.colReorder.transpose(colidx)] = [min, max];

Works wonders!!!