Almost Functional Range Slider

arnonrdp

Hey guys, I am trying to integrate Ion.RangeSlider and DataTable Range Filtering.

And look what I've done! It almost work! lol
Range Slider actually changes de input values but nothing happen on table BUT when you type a number on the input it works!

Link to test case: http://live.datatables.net/gatadaqa/1/edit

Do you guys know how can we make this integration works?

Thanks in advance.

kthorngren

One option is to trigger the keyup event for one of the inputs using trigger(). See this updated example:
http://live.datatables.net/dibesaki/1/edit

Kevin

kthorngren

Another option is to call draw() in your updateInputs()` function, for example:
http://live.datatables.net/yixoxede/1/edit

Kevin

arnonrdp

The first one worked better for me. On my DataTable the second one returns me the following error: DataTables warning: table id={id} - Cannot reinitialise DataTable..

But it's fine, the trigger solution inside updateInputs is amazing and it works!

Thank you very much for your help again and again!!!

Just one question: what solution would you use to insert range sliders on many columns? (I am asking because the only idea I have is to repeat all this code for each column). Can you think of a simpler way?

kthorngren

On my DataTable the second one returns me the following error: DataTables warning: table id={id} - Cannot reinitialise DataTable..

Probably an order of operations. You might be loading your table with an async ajax request so updateInputs() function runs before the Datatables init code in documetn.ready(). There are various ways to fix this but if the trigger option works then thats simple enough.

what solution would you use to insert range sliders on many columns?

It would take a bit of thought to programmatically build the sliders in a loop. I would find a way to incorporate the column number for the text input ID's. I would look at building the sliders inside initComplete. Take a look at this example for building select inputs in the column footer. The example can be modified to get the column().data() and place in an array using toArray(). Then use Math.min() and Math.max() to get the min and max values to set for the slider. You can place the sliders anywhere you like, they don't need to be in the footer as in the example.

My suggestion is to continue to build on your test case and if you have questions post the link to the new example with the question.

Kevin

arnonrdp

I understood. I am looking (unsuccessfully) for an example that I had seen here that shows this example, but with two filters, I believe that it can also help me to set up a base for the final code.

I am also studying how to implement Math.min() and Math.max(), I believe this will be very useful.

If you wanna take a look at the final art, here is: http://myoption.com.br

arnonrdp

Hey @kthorngren, I figure out that I just needed to use table.draw() to solve that question.

Now I am trying to implement the second range slider but I am doing something wrong, and I don't know what it is.

Here is what I got: http://live.datatables.net/sivelagi/2/edit

I am reading the documentation but still can't find how to do it.

kthorngren

There are a few changes to make:

1: Need to track each column as a boolean variable when determining if its within the range in the search plugin. Added variables ageFound and salaryFound for this.
2: Can't use parseFloat for the salary as it has non-numeric characters. Need to remove those characters first. Added a function to do so.
3: The updateInputs() function needs to include the salary range slider. You need to check which slider input is changed so the proper text inputs can be updated.

See the updated example:
http://live.datatables.net/sivelagi/3/edit

Kevin

arnonrdp

The code will get really huge when I add a lot of column filter, so I wonder if it is possible to create a main function (constructor?) with those statements and then I just call this function.

I figure out how to did this on Range Sliders and it is working pretty fine, it let me clear about 20 lines.

I tried something like this:

    // Filters Default Function
    function Filters (min, max, data) {
      this.min = min;
      this.max = max;
      this.data = data;
      this.dataFound = false;
      if ( ( isNaN( min ) && isNaN( max ) ) ||
          ( isNaN( min ) && data <= max ) ||
          ( min <= data   && isNaN( max ) ) ||
          ( min <= data   && data <= max ) )
      {
        dataFound = true;
      }
    }
    
    // Age Filter Column
    var age = new Filters ($('#minAge'), $('#maxAge'), data[3]);

But it seems to be harder than I thought. I also let it commented over here: http://live.datatables.net/sivelagi/4/edit

kthorngren

Depending on your requirements you could do something like this example from this thread. The example allows for only one range search to be active at a time.

I adapted the example to show one way to use the API with multiple columns. Basically you create an array of arrays. Each array contains the colIndex, min and max values. It use an array showRow to track if the matches for each column as a boolean. There are two possible returns. The first shows the row if any of the columns match (one or more true values) - an OR type search. The second is an AND type search and shows the row if all the columns have true matches.
http://live.datatables.net/lovepaxi/10/edit

Using the API method allows for an easy way to pair the column index with the min max values. You can define the inputs with HTML5 data attributes to define the column index. You could skip the API and just find all the range inputs using the search plugin. You can use jQuery each() to loop through all the slider div elements. The use jQuery find() to find the min and max inputs and use jQuery data() to retrieve the HTML5 data attribute containing the column index.

You might look at using columns.className to define a class specific to range searches. In initComplete you can loop through all the columns with the range classname with columns().every(). In this loop you can get the column index (column().index()), column header name (column().header()) and the min and max values (using toArray()). Call a function, with these values, to build our sliders. Here is a simple example:
http://live.datatables.net/duyawose/1/edit

Will leave the slider builds to you You can dynamically build the HTML to display the sliders and create the event handlers. Doing all this will allow you to just add the classname to the columns you want the range searches applied to and you Javascript functions will build the HTML, event handlers and search APIs to automatically work.

Kevin

arnonrdp

The examples you brought were instrumental in helping me find a solution that fulfilled the mission without causing the table to load slowly.

What I did after all was ask the backend partner to deliver me a .json with the maximum and minimum values. That way I just GET the data in jQuery and applied it to the inputs and sliders.

You were able to give me a direction that helped me a lot in my studies and in the general construction of the tables.

I am very grateful for all your help, without you it would have been much more difficult.

Thank you very much!!

kthorngren

Glad to help. Especially when you were trying yourself

Kevin