Filtering with a slider Datatable server side

Angelj107

Hi everyone,
this is my first post here and I would like to have some help for a custom filtering I need to add to my table.

I have a table of 20k rows, so I need it to be processed server side.

First of all, here is my JS code, it's a bit of a mess, I know, but I copied and pasted various codes from various sources.

  <script type="text/javascript">
    (function($) {
      $(document).ready(function() {
      
        var table = $('#table_id').DataTable({
          "pageLength": 50,
          "bfilter": true,
          "order": [
            [4, "desc"]
          ],
        
     
          "searching": true,
          "responsive": true,
          "processing": true,
          "serverSide": true,
          "bPaginate": true,

          "ajax": {
            "url": "server_side/scripts/server_processing.php",
           
            }
            
            //"datatype":"json"
          },

          fixedHeader: true,
          
        });
        var val_range;
    var sal_range;
    $.fn.dataTable.ext.search.push(
      function(settings, data, dataIndex) {
        var min = parseFloat(val_range.slider("values", 0));
        var max = parseFloat(val_range.slider("values", 1));
        var col = parseFloat(data[3]) || 0; // data[number] = column number
        if ((isNaN(min) && isNaN(max)) ||
          (isNaN(min) && col <= max) ||
          (min <= col && isNaN(max)) ||
          (min <= col && col <= max)) {
          return true;
        }
        return false;
      },
      function(settings, data, dataIndex) {
        var min = parseFloat(sal_range.slider("values", 0));
        var max = parseFloat(sal_range.slider("values", 1));
        var col = parseFloat(data[4]) || 0; // data[number] = column number
        if ((isNaN(min) && isNaN(max)) ||
          (isNaN(min) && col <= max) ||
          (min <= col && isNaN(max)) ||
          (min <= col && col <= max)) {
          return true;
        }
        return false;
      }
    );
        sal_range = $("#val_range_salary");
        val_range = $("#val_range");
        var live_range_val = $("#live_range_val");
        var val_range_salary = $("#live_range_val_salary");
        val_range.slider({
          range: true,
          min: 0,
          max: 90,
          step: 1,
          values: [0, 90],
          slide: function(event, ui) {
            live_range_val.val(ui.values[0] + " - " + ui.values[1]);
          },
          stop: function(event, ui) {
            //table.draw();
            table.ajax.reload();
          }
        });
        sal_range.slider({
          range: true,
          min: 40,
          max: 99,
          step: 1,
          values: [40, 99],
          slide: function(event, ui) {
            val_range_salary.val(ui.values[0] + " - " + ui.values[1]);
          },
          stop: function(event, ui) {
            //table.draw();
            table.ajax.reload();
          }
        });
        live_range_val.val(val_range.slider("values", 0) + " - " + val_range.slider("values", 1));
        val_range_salary.val(sal_range.slider("values", 0) + " - " + sal_range.slider("values", 1));})
    })(jQuery);;
  </script>

The tables and the sliders are correctly displayed, but, as you may have guessed, changing the values of the slider doesn't affect my table.
If I generate the table client - side the code works just fine.

How can I make it work server-side?
I would like to keep it clean, without the need to click "update" or some kind of button to give the Post values to my server_processing.php. I would like to behave like the "Search" on top of the table, that as I type it shows me new results.

Thanks to whoever will help!

kthorngren

The search plugin code doesn't work since you are using server side processing. Use ajax.data as a function to send the slider input values to the server, like this example. Use draw() to initiate the ajax request to the server with the parameters. Your server script will need to grab the parameters and incorporate them as part of your data query.

Kein

Angelj107

The search bar on top of the table?
It works actually

Angelj107

By the way thank you for your answer,
but can you help me understand the example itself?
While searching for a solution on my own I found that example too, but I don't understand how I should integrate my above code to with that example.

Thank you again.

Angelo

kthorngren

I'm not familiar with the slider code you are using so this may not be totally correct but hopefully this will help.

        "ajax": {
          "url": "server_side/scripts/server_processing.php",
            "data": function ( d ) {
                // Get the slider inputs to send to the server
                d.val_min = val_range.slider("values", 0);
                d.val_max = val_range.slider("values", 1);
                d.sal_min = sal_range.slider("values", 0);
                d.sal_max = sal_range.slider("values", 1);
            }          
          }

In your slider stop events call draw() to send the request to the server:

        stop: function(event, ui) {
          table.draw();
        }

If you still need help you can build one or both sliders in a test case and we can help shoe how to send to the server. You can start with one of the server side templates here.

Kevin

Angelj107

Hi,
Thank you for you help.
Using your suggestions make my table to not show at all

Here is the test case. I'm using the sider for column 5 (salary), but it doesn't work.

live.datatables.net/pamupime/1/edit?html,js,output

kthorngren

First you need to initialize the sal_range variable before trying to use it with ajax.data. After moving that code before Datatables the following error occurs when moving the slider.

Uncaught ReferenceError: table is not defined

You need to get an instance of the API, for example:

var table = $('#example').DataTable( {

Use the browser's network inspector to verify the parameters are sent. Looking at the XHR request headers these parameters are sent, along with the other SSP parameters, on initilization.

sal_min: 40000
sal_max: 9900000

Change the slider and when stopped a new request is sent with update parameters.
http://live.datatables.net/xexiruxi/1/edit

EDIT: Also you can remove the search plugin as it won't run with server side processing.

Kevin

Angelj107

Hi, thank you for your help.

I still don't understand why you say to remove the search plugin, as it's actually working (even in your link, If I type a name it works)

As for the slider, it doesn't work (in your link too).

From the XHR request, it seems that the values are correctly sent.

Angelo

kthorngren

I still don't understand why you say to remove the search plugin, as it's actually working (even in your link, If I type a name it works)

I removed the search plugin, ie $.fn.dataTable.ext.search.push(, from my example.

As for the slider, it doesn't work (in your link too).

I assume you mean that changing the slider doesn't filter any data. The server script isn't setup to use the parameters sent. You will need to retrieve the parameters in your server script and use them as part of your data query. Using these parameters are custom and Datatables doesn't have anything built in to use them.

Kevin