如何隱藏 data.table 在 javascript 和 jquery 中顯示條目？

Question

我正在為 jQuery 使用 DataTable 插件，並使用 show entries(datatables_length) 將下拉列表設置為 select 一次在頁面上顯示多少條目。 我還有一個由 DataTable 提供的 function 內置的小型搜索，用於搜索所需的條目。 僅當 DataTable 搜索未在搜索欄中找到任何匹配數據時，我才致力於隱藏頁面上的顯示條目下拉列表。 下面是我的代碼。 如果搜索 function 返回 null 或沒有匹配值，請幫我隱藏顯示條目下拉列表。

$(document).ready(function() {
       
    $('#table').DataTable() {
        'oLanguage': {
            'sSearch': '<span>Search</span>'
        },
            lengthMenu : [ 5, 10, 15, 20],
            pagingType: 'full_numbers'
        });
        searchForData();
    });

    function searchForData() {
        $('.datatable_filter input[type="search"])
          .attr('placeholder', 'person Id', 'Person name')
          .css({'width':'500px', 'display':'inline-block'});
    }
});

Answer 1

這里可以使用drawCallback選項

$(document).ready( function () {
  var table = $('#table').DataTable({
    drawCallback: function(){
      var api = this.api();
      var records = api.page.info().recordsDisplay;
      var pageMenu = $('div.dataTables_length');
      if (records === 0) {
        pageMenu.hide();
      } else if (pageMenu.css('display') == 'none') {
        pageMenu.show();
      }
      // HERE IS YOUR FUNCTION TO CUSTOM YOUR SEARCH INPUT
      searchForData();   
    }
  });
});

一個活生生的例子： http://live.datatables.net/pecafifi/2/edit

如果您使用的 DataTables版本 < 1.10 ，則必須使用fnDrawCallback選項

Answer 2

我正在使用 jQuery 的 DataTable 插件並使用顯示條目（datatables_length）有一個下拉列表來選擇一次在頁面上顯示多少條目。 我還有一個由 DataTable 提供的內置函數來搜索所需的條目。 我正在努力隱藏頁面上的顯示條目下拉列表，前提是 DataTable 搜索未在搜索欄中找到任何匹配的數據。 下面是我的代碼。 如果搜索函數返回空值或沒有匹配值，請幫助我隱藏顯示條目下拉列表。

$(document).ready(function() {
       
    $('#table').DataTable() {
        'oLanguage': {
            'sSearch': '<span>Search</span>'
        },
            lengthMenu : [ 5, 10, 15, 20],
            pagingType: 'full_numbers'
        });
        searchForData();
    });

    function searchForData() {
        $('.datatable_filter input[type="search"])
          .attr('placeholder', 'person Id', 'Person name')
          .css({'width':'500px', 'display':'inline-block'});
    }
});