数据表范围搜索功能

Question

我正在使用 jQuery DataTables 插件。我正在尝试添加范围搜索：例如 5 到 10 之间的所有值。

我在网上找到了这个： http://www.cscc.edu/_resources/app-data/datatables/examples/plug-ins/range_filtering.html

但是，我正在寻找一种在脚本中调用它的方法，而不是拥有一个始终监听输入的函数。它还必须适用于多个列，例如：

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

是否已经有解决方案？如果没有，是否可以添加一个可以稍后调用的自定义（最好是一列）搜索过滤器？或者也许调用一个带有回调函数的搜索？

Answer 1

我为它创建了一个函数，添加这个代码：

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;
    }
);

然后使用 tb_setRange(columnName,min,max);和画（）

这是一个工作示例

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>