JQuery DataTables - 隐藏表格直到搜索答案

【问题标题】：JQuery DataTables - Hide Table Until SearchingJQuery DataTables - 隐藏表格直到搜索
【发布时间】：2016-10-17 04:01:32
【问题描述】：

我正在使用带有 JQuery 的 DataTables 在我的网站上显示一些数据。我使用搜索功能来过滤数据，并给我预期的结果。我想做的是隐藏表格，直到用户开始在框中输入搜索，然后才显示正确的结果。这是我现在的 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，因此我必须从包含它的过滤器元素中引用它。

【问题讨论】：

标签： javascript jquery datatable

【解决方案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
}

【讨论】：

我用我最新的尝试更新了我的代码。我认为这大致就是您要了解的内容，但是我无法让它正确观看输入字段。我想在用户输入时检查它。如果此时它有内容，我将显示表格和分页，如果他们刚刚删除了搜索或从未输入过，我希望将其隐藏。请让我知道您在我的新代码中看到的错误。谢谢！
当我将 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();
            }
        }

一旦过滤器输入为空，它将再次隐藏所有内容。

【讨论】：