将数字范围筛选器添加到多个 DataTable 列

Question

我有一个数据表，我正在尝试向其中的多个列添加过滤器。有些列是字符串，需要文本输入，而其他列是数字，需要范围输入。我按照此处所述向每一列添加过滤器。对于范围输入，我正在尝试添加我自己的自定义搜索插件，如此处所述. 本质上，我试图结合文档两个部分的策略：我想遍历应用过滤器的每一列，对于那些数字列，我想使用范围过滤器。他们在多列筛选文档中提供的示例表包括数字列，但他们用于这些列的筛选器是文本输入，坦率地说，这看起来不像大多数人在现实世界的实现中采用的方式。他们提供的用于设置数值范围过滤器的文档包括一个示例，其中只有一列要通过输入进行过滤，这允许他们将适当的列索引硬编码到他们的自定义函数中。我的问题是我不知道如何将我需要的变量获取到自定义范围过滤器函数中。具体来说，我需要获取列索引和用户对函数的输入。我将这个引导滑块用于范围输入，所以为了获得用户输入值，我调用.slider我的输入并传入'getValue'.如何将我的变量，特别是列索引和用户输入，放入我的自定义范围过滤器函数中？我的代码如下。我还制作了这个JSFiddle来展示我正在尝试做的事情。如果注释掉自定义 DataTables 函数，请注意两个文本输入的工作方式。function populateEntryTable() {    $('#entryTableContainer').empty();    /* put demo data in array of objects that is used to populate DataTable */    var entries = [{name: John, age: 20, salary: 40000},     {name: Bill, age: 40, salary: 200000},     {name: Amy, age: 31, salary: 150000}];    /*build my table*/    $('#entryTableContainer').append('<table id="entryTable"><thead><tr></tr></thead><tbody></tbody></table>');    for (var key in entries[0]) {        $('#entryTableContainer thead tr').append('<th>' + key + '</th>');    }    for (var i = entries.length - 1; i >= 0; i--) {        for (var key in entries[i]) {            $('#entryTableContainer tbody tr:last-child').append('<td>' + entries[i][key] + '</td>');        }    }

Answer 1

我能够通过在 .each 循环中移动自定义函数来解决我的问题，将我需要的变量带入适当的范围。我把我的解决方案放在JSFiddle上。

   $(function() {

  populateEntryTable()

  function populateEntryTable() {

    $('#entryTableContainer').empty();

    /* put demo data in array of objects that is used to populate DataTable */

    var entries = [{

        name: 'John',

        title: 'Coordinator',

        age: 20,

        salary: 40000

      },

      {

        name: 'Bill',

        title: 'Manager',

        age: 40,

        salary: 200000

      },

      {

        name: 'Amy',

        title: 'Manager',

        age: 31,

        salary: 150000

      }

    ];

    /*build my table*/

    $('#entryTableContainer').append('<table id="entryTable"><thead><tr></tr></thead><tbody></tbody></table>');

    for (var key in entries[0]) {

      $('#entryTable thead tr').append('<th>' + key + '</th>');

    }

    for (var i = entries.length - 1; i >= 0; i--) {

      $('#entryTable tbody').append('<tr></tr>');

      for (var key in entries[i]) {

        $('#entryTable tbody tr:last-child').append('<td>' + entries[i][key] + '</td>');

      }

    }

    $('#entryTable thead tr').clone(true).appendTo('#entryTable thead');

    var numberInputs = ['age', 'salary'];

    $('#entryTable thead tr:eq(1) th').each(function(i) {

      var title = $(this).text();

      // if the col requires a text input filter, do text input filter stuff, which works fine. Else if it requires a number range filter, do number filter stuff, which doesn't work fine.

      if (numberInputs.indexOf(title) == -1) {

        $(this).html('<input type="text" placeholder="Search">');

        $('input', this).on('keyup change', function() {

          if (entryTable.column(i).search() !== this.value) {

            entryTable.column(i).search(this.value).draw();

          }

        });

      } else if (numberInputs.indexOf(title) > -1) {

        // get min and max values in each column to set appropriate bootstrap-slider attributes

        var min;

        var max;

        $('#entryTable tbody tr').each(function(j) {

          var item = parseFloat($('#entryTable tbody tr:eq(' + j + ') td:eq(' + i + ')').text());

          if (min == undefined || item < min) {

            min = Math.floor(item);

          }

          if (max == undefined || item > max) {

            max = Math.ceil(item);

          }

        });

        var rangeMax = title == 'age' ? 100 : 1000000;

        var step = rangeMax == 100 ? 1 : 10000;

        $(this).html('<input id="' + title + '" type="range" value="0" min="0" max="' + rangeMax + '" step="' + step + '">');

        var userInput = $('input', this).val();

        // custom DataTables function for filtering number ranges

        $.fn.dataTable.ext.search.push(

          function(settings, data, dataIndex) {

            var colVal = parseFloat(data[i]) || 0;

            if (colVal > userInput) {

              return true;

            }

            return false;

          }

        );

        // add listener for bootstrap-slider change

        $('input', this).on('change', function() {

          userInput = $(this).val();

          entryTable.draw();

        });

      }

    });

    /* call DataTable on my table and include my option settings */

    var entryTable = $('#entryTable').DataTable({

      orderCellsTop: true,

      paging: false,

      bInfo: false,

      scrollY: 400,

      scrollCollapse: true,

      order: [1, 'desc'],

      searching: true

    });

    /*     hide whole table search bar--cannot set 'searching' to false because this also disables individual column search capabilities */

    $('#entryTable_filter').hide();

  }

});