jQuery數據表-隱藏表直到搜索

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輸入”正確定位。 DataTables呈現的搜索輸入沒有任何我可以定位的唯一ID，因此我必須從包含它的過濾器元素中引用它。

Answer 1

嘗試這樣的事情：

創建一個函數以使用所需的過濾器參數呈現數據表並在搜索功能上調用它。 這樣就無法在頁面加載時呈現表。 啟動搜索功能后，它將使用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();
            }
        }

一旦過濾器輸入為空，它將再次隱藏所有內容。