jQuery数据表-隐藏表直到搜索

问题描述

我正在将DataTables与JQuery一起使用，以在我的网站上显示一些数据.我使用搜索功能过滤数据，并提供预期的结果.我想做的就是隐藏表格，直到用户开始在框中输入搜索内容，然后才显示正确的结果.现在是我的DataTables代码:

I'm using DataTables with JQuery to show some data on my site. I use the search feature to filter the data, and give me the intended results. What I'd like to do is to hide the table until a user begins typing a search in the box, and only then display the proper results. Here's my DataTables code right now:

    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，因此我必须从包含它的过滤器元素中引用它.

It successfully hides everything from the DataTable but the searchbox on document.ready, but I can't get it to call my renderTables() function when a user clicks in the box and types. I'm not sure if I'm targeting it correctly with: '.dataTables_filter input'. The search input that DataTables renders doesn't have any unique ID I can target, so I have to refer to it from the filter element which contains it.

推荐答案

尝试一些类似的事情:

使函数具有所需的过滤器参数来呈现数据表，并在搜索功能上对其进行调用.这样就无法在页面加载时呈现表.启动搜索功能后，它将使用filter参数呈现表.

Make a function to render the datatable with the required filter parameter and call it on search functionality. So that it cannot render table on page load. When your search functionality is initiated it will render the table with the filter parameter.

例如:

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

这篇关于jQuery数据表-隐藏表直到搜索的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！