简体   繁体   中英

how to hide data table show entries in javascript and jquery?

I am using DataTable plugin for jQuery and using show entries(datatables_length) to have a dropdown list to select how many entries to be shown on the page at once. I also have a small search built in function given by DataTable to search for the desired entry. I am working on to hide the show entries drop down list on the page ONLY IF the DataTable search has not found any matching data in the search bar. Below is my code. Please help me hide the show entries dropdown list if the search function returns the null or no matching value.

$(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'});
    }
});

Here the drawCallback option can be used

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

A live example: http://live.datatables.net/pecafifi/2/edit

If you are using DataTables version < 1.10 , than you must to use fnDrawCallback option

I am using DataTable plugin for jQuery and using show entries(datatables_length) to have a dropdown list to select how many entries to be shown on the page at once. I also have a small search built in function given by DataTable to search for the desired entry. I am working on to hide the show entries drop down list on the page ONLY IF the DataTable search has not found any matching data in the search bar. Below is my code. Please help me hide the show entries dropdown list if the search function returns the null or no matching value.

$(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'});
    }
});

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM