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（）函数。我不确定我是否正确定位它：＆＃39; .dataTables_filter输入＆＃39;。 DataTables呈现的搜索输入没有我可以定位的任何唯一ID，所以我必须从包含它的filter元素中引用它。

Answer 1

尝试这样的事情：

创建一个函数，使用所需的filter参数呈现数据表，并在搜索功能上调用它。这样它就无法在页面加载时呈现表格。启动搜索功能后，它将使用filter参数呈现表。

例如：

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

Answer 2

您可以使用渲染的过滤器输入框，然后使用次品功能。这就是我的方法。

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

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

JQuery DataTables - 在搜索之前隐藏表

2 个答案: