jQuery DataTables - скрыть таблицу до поиска

#javascript #jquery #datatable

Вопрос:

Я использую таблицы данных с jQuery для отображения некоторых данных на моем сайте. Я использую функцию поиска для фильтрации данных и даю мне ожидаемые результаты. Что я хотел бы сделать, так это скрыть таблицу до тех пор, пока пользователь не начнет вводить поиск в поле, и только тогда отображать правильные результаты. Вот мой код DataTables прямо сейчас:

     function renderTable() {
        jQuery('.dataTable').show();
        jQuery('.dataTables_info').show();
        jQuery('.dataTables_paginate').show();
    }

    function hideTable() {
        jQuery('.dataTable').hide();
        jQuery('.dataTables_info').hide();
        jQuery('.dataTables_paginate').hide();
    }

    jQuery('.dataTables_filter input').keypress(function() {
        if (jQuery('.dataTables_filter input').val() != '') {
            renderTable();
        } else {
            hideTable();
        }
    });

    jQuery(document).ready(function() {

        jQuery('#resultsTable').DataTable({
            "paging": true,
            "pageLength": 25,
            "lengthChange": false,
            "pagingStyle": "simple_numbers",
            "language": {
                "search": "",
                "searchPlaceholder": "Search for an entry"
            },
            "order": [1, 'asc']
        });

        hideTable();

    } );

Он успешно скрывает все из таблицы данных, кроме поля поиска в document.ready, но я не могу заставить его вызывать мою функцию renderTables(), когда пользователь нажимает на поле и вводит. Я не уверен, правильно ли я ориентируюсь на нее с помощью: ‘.dataTables_filter input’. Поисковый ввод, который отображает DataTables, не имеет какого-либо уникального идентификатора, на который я мог бы настроить таргетинг, поэтому я должен ссылаться на него из элемента фильтра, который его содержит.

Ответ №1:

Попробуйте что-то вроде этого:

Создайте функцию для отображения таблицы данных с требуемым параметром фильтра и вызовите ее в функции поиска. Чтобы он не мог отображать таблицу при загрузке страницы. Когда ваша функция поиска будет запущена, она отобразит таблицу с параметром фильтра.

Пример:

 $(document).ready(function(){
    $('#search_box').keyup(function(){
        var searchStr = $(this).val();

        if((searchStr).length)
        {
            filterData();   // call the filter function with required parameters
        }
        else
        {
            // empty the table body
        }
    });
});

function filterData()
{
    // your code
}

1. Я обновил свой код своей последней попыткой. Я думаю, это примерно то, к чему вы клоните, но у меня возникли проблемы с тем, чтобы заставить его правильно просматривать поле ввода. Я хотел бы проверить это, когда пользователь вводит в него. Если на этом этапе в нем есть содержимое, я покажу таблицу и разбивку на страницы, если они только что удалили свой поиск или никогда его не вводили, я бы хотел, чтобы он был скрыт. Пожалуйста, дайте мне знать, что вы видите в моем новом коде неправильного. Спасибо!

2. Это сработало, когда я переместил наблюдение keyup() в свой блок document.ready. Если вы обновите свой ответ, чтобы отразить, что фрагмент keyup() должен быть в пределах проверки document.ready, я приму. Спасибо!

Ответ №2:

Вы можете использовать поле ввода отображаемого фильтра, а затем использовать функцию возврата. Вот как я это сделал.

     drawCallback: function(settings){
            if($('#yourtableid_filter input').val().length > 0) --this is generated by datatable
            {
                $('#yourtableid tr').show();
            } else {
                $('#yourtableid tr').hide();
            }
        }

как только вход фильтра опустеет, он снова скроет все.