CODEWITHSUNDEEP
javascriptjquerydatatable
Dan Hennion
Dan Hennion

Reputation: 1745

JQuery DataTables - Hide Table Until Searching

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();

    } );

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.

Upvotes: 1

Views: 4640

Answers (2)

CyberNinja
CyberNinja

Reputation: 864

You can use the rendered filter input box, then use the drawback function. This is how I did it.

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

once the filter input is empty, it will hide everything again.

Upvotes: 0

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26258

Try some thing like this:

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.

Ex:

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

Upvotes: 2

Related Questions