亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

將數字范圍篩選器添加到多個 DataTable 列

將數字范圍篩選器添加到多個 DataTable 列

12345678_0001 2022-11-27 16:46:38
我有一個數據表,我正在嘗試向其中的多個列添加過濾器。有些列是字符串,需要文本輸入,而其他列是數字,需要范圍輸入。我按照此處所述向每一列添加過濾器。對于范圍輸入,我正在嘗試添加我自己的自定義搜索插件,如此處所述. 本質上,我試圖結合文檔兩個部分的策略:我想遍歷應用過濾器的每一列,對于那些數字列,我想使用范圍過濾器。他們在多列篩選文檔中提供的示例表包括數字列,但他們用于這些列的篩選器是文本輸入,坦率地說,這看起來不像大多數人在現實世界的實現中采用的方式。他們提供的用于設置數值范圍過濾器的文檔包括一個示例,其中只有一列要通過輸入進行過濾,這允許他們將適當的列索引硬編碼到他們的自定義函數中。我的問題是我不知道如何將我需要的變量獲取到自定義范圍過濾器函數中。具體來說,我需要獲取列索引和用戶對函數的輸入。我將這個引導滑塊用于范圍輸入,所以為了獲得用戶輸入值,我調用.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>');        }    }
查看完整描述

1 回答

?
收到一只叮咚

TA貢獻1821條經驗 獲得超5個贊

我能夠通過在 .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();

  }

});


查看完整回答
反對 回復 2022-11-27
  • 1 回答
  • 0 關注
  • 115 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號