Datatables range search function

Question

I am using the jQuery DataTables plugin. I am trying to add a range search: All values between 5 and 10 for example.

I found this online: http://www.cscc.edu/_resources/app-data/datatables/examples/plug-ins/range_filtering.html

However, i am looking for a way to call it in a script, instead of having a function which is always listening to the inputs. It also has to work for multiple columns, something like:

table.column(0).setRange(5,10);
table.draw();

Is there already a solution for this? If not, is it possible to add a custom (preferably for one column) search filter which can be called later? Or maybe to call a search with a callback function in it?

Answer 1

i created a function for it, add this code:

jQuery.fn.dataTable.Api.register('tb_setRange', function(column, min, max) {
    var table = jQuery(this.table().node());


    if (typeof(table.data('tb_ranges')) == 'undefined') {
      var tb_ranges = {};
    } else {
      var tb_ranges = table.data('tb_ranges');
    }


    var columnIndex = this.column(column + ':name').index();
    tb_ranges[columnIndex] = {
      'min': min,
      'max': max
    };

    table.data('tb_ranges', tb_ranges);
});

jQuery.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
      var api = new jQuery.fn.dataTable.Api(settings);
      var tb_ranges = jQuery(api.table().node()).data('tb_ranges');
      var result = true;
      if (typeof(tb_ranges) != 'undefined') {
        jQuery.each(tb_ranges, function(key, ranges) {

          var value = data[key];
          if (ranges.min !== null) {
            if (value < ranges.min) {
              return result = false;
            }
          }
          if (ranges.max !== null) {
            if (value > ranges.max) {
              return result = false;
            }
          }
        });
      }
      return result;
    }
);

Then use tb_setRange(columnName,min,max); and draw()

Here is a working example

jQuery(document).ready(function() {
  jQuery.fn.dataTable.Api.register('tb_setRange', function(column, min, max) {
    var table = jQuery(this.table().node());


    if (typeof(table.data('tb_ranges')) == 'undefined') {
      var tb_ranges = {};
    } else {
      var tb_ranges = table.data('tb_ranges');
    }


    var columnIndex = this.column(column + ':name').index();
    tb_ranges[columnIndex] = {
      'min': min,
      'max': max
    };

    table.data('tb_ranges', tb_ranges);
  });

  jQuery.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
      var api = new jQuery.fn.dataTable.Api(settings);
      var tb_ranges = jQuery(api.table().node()).data('tb_ranges');
      var result = true;
      if (typeof(tb_ranges) != 'undefined') {
        jQuery.each(tb_ranges, function(key, ranges) {

          var value = data[key];
          if (ranges.min !== null) {
            if (value < ranges.min) {
              return result = false;
            }
          }
          if (ranges.max !== null) {
            if (value > ranges.max) {
              return result = false;
            }
          }
        });
      }
      return result;
    }
  );



  var table = jQuery('#datatable').DataTable({
    'columns': [{
      'name': 'name'
    }, {
      'name': 'age'
    }, {
      'name': 'number'
    }]
  });
  table.tb_setRange('age', 14, 20);
  table.tb_setRange('number', 6, 7);
  table.draw();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.js"></script>


<table id="datatable">
  <thead>
    <tr>
      <td>name</td>
      <td>age</td>
      <td>number</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>mark</td>
      <td>14</td>
      <td>1</td>
    </tr>
    <tr>
      <td>joel</td>
      <td>18</td>
      <td>7</td>
    </tr>
    <tr>
      <td>Ben</td>
      <td>22</td>
      <td>10</td>
    </tr>
  </tbody>
</table>