javascript - JQuery DataTables - 隐藏表直到搜索

Question

我将 DataTables 与 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();

    } );

它成功地隐藏了 DataTable 中的所有内容，但 document.ready 上的搜索框除外，但是当用户单击该框并键入时，我无法让它调用我的 renderTables() 函数。我不确定我是否正确地定位它:'.dataTables_filter input'。 DataTables 呈现的搜索输入没有任何我可以定位的唯一 ID，因此我必须从包含它的过滤器元素中引用它。

Answer 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
}