第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

將數(shù)字范圍篩選器添加到多個 DataTable 列

將數(shù)字范圍篩選器添加到多個 DataTable 列

12345678_0001 2022-11-27 16:46:38
我有一個數(shù)據(jù)表,我正在嘗試向其中的多個列添加過濾器。有些列是字符串,需要文本輸入,而其他列是數(shù)字,需要范圍輸入。我按照此處所述向每一列添加過濾器。對于范圍輸入,我正在嘗試添加我自己的自定義搜索插件,如此處所述. 本質(zhì)上,我試圖結(jié)合文檔兩個部分的策略:我想遍歷應(yīng)用過濾器的每一列,對于那些數(shù)字列,我想使用范圍過濾器。他們在多列篩選文檔中提供的示例表包括數(shù)字列,但他們用于這些列的篩選器是文本輸入,坦率地說,這看起來不像大多數(shù)人在現(xiàn)實(shí)世界的實(shí)現(xiàn)中采用的方式。他們提供的用于設(shè)置數(shù)值范圍過濾器的文檔包括一個示例,其中只有一列要通過輸入進(jìn)行過濾,這允許他們將適當(dāng)?shù)牧兴饕簿幋a到他們的自定義函數(shù)中。我的問題是我不知道如何將我需要的變量獲取到自定義范圍過濾器函數(shù)中。具體來說,我需要獲取列索引和用戶對函數(shù)的輸入。我將這個引導(dǎo)滑塊用于范圍輸入,所以為了獲得用戶輸入值,我調(diào)用.slider我的輸入并傳入'getValue'.如何將我的變量,特別是列索引和用戶輸入,放入我的自定義范圍過濾器函數(shù)中?我的代碼如下。我還制作了這個JSFiddle來展示我正在嘗試做的事情。如果注釋掉自定義 DataTables 函數(shù),請注意兩個文本輸入的工作方式。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貢獻(xiàn)1821條經(jīng)驗 獲得超5個贊

我能夠通過在 .each 循環(huán)中移動自定義函數(shù)來解決我的問題,將我需要的變量帶入適當(dāng)?shù)姆秶?。我把我的解決方案放在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();

  }

});


查看完整回答
反對 回復(fù) 2022-11-27
  • 1 回答
  • 0 關(guān)注
  • 112 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號