как скрыть записи отображения таблицы данных в javascript и jquery?

#javascript #jquery #datatables

#javascript #jquery #таблицы данных

Вопрос:

Я использую плагин DataTable для jQuery и использую show entries (datatables_length), чтобы иметь выпадающий список для выбора количества записей, которые будут отображаться на странице одновременно. У меня также есть небольшая встроенная функция поиска, предоставляемая DataTable для поиска нужной записи. Я работаю над тем, чтобы скрыть раскрывающийся список показать записи на странице, ТОЛЬКО ЕСЛИ поиск по данным не нашел никаких совпадающих данных в строке поиска. Ниже приведен мой код. Пожалуйста, помогите мне скрыть выпадающий список показать записи, если функция поиска возвращает значение 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'});
    }
});
  

Ответ №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

Если вы используете таблицы данных версии <1.10, вам необходимо использовать fnDrawCallback опцию

Комментарии:

1. Функция searchForData() дает мне симпатичную панель поиска на странице. Если я напишу туда drawCallback, это лишит функции поиска.

2. Пожалуйста, посмотрите на мой комментарий ниже к этому вопросу. не работает. @NKSM