Clear (Reset) jQuery DataTable Search Textbox value on Page Load in jQuery

Last Reply 8 months ago By dharmendr

Posted 8 months ago

I have refer the below link for Gridview search and filter operation.

How to clear the value of Search Textbox value on pageload

GridView CRUD operation using Bootstrap DataTable plugin in ASP.Net

How to call search() in that script. below is the script and my code. If there is any other solution please suggest.

    <link href="css/datatables_css/dataTables.bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.12.4.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('[id*=grdDetails]').prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable({
                "responsive": false,
                "sPaginationType": "full_numbers",
                "bPaginate": true,
                "bSort": true,
                "iDisplayLength": 10,
                "stateSave": true,
                "stateDuration": 60 * 1
            });
        });
        //On UpdatePanel Refresh.
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        if (prm != null) {
            prm.add_endRequest(function (sender, e) {
                if (sender._postBackSettings.panelsToUpdate != null) {
                    $('[id*=grdDetails]').prepend($("<thead></thead>").append($('[id*=grdDetails]').find("tr:first"))).DataTable({
                        "responsive": false,
                        "sPaginationType": "full_numbers",
                        "bPaginate": true,
                        "bSort": true,
                        "iDisplayLength": 10,
                        "stateSave": true,
                        "stateDuration": 60 * 1
                    });
                }
            });
        };
    </script>

 

Posted 8 months ago

Refer below code.

<script type="text/javascript">
    $(function () {
        var table =$('[id*=gvCustomers]')
        .prepend($("<thead></thead>")
        .append($(this).find("tr:first")))
        .DataTable({
            "responsive": true,
            "sPaginationType": "full_numbers",
            "bPaginate": true,
            "bSort": true,
            "iDisplayLength": 2,
            "stateSave": true,
            "stateDuration": 60 * 1
        });
        table.on('page.dt', function () {
            $('input[type=search]').val(''); // Clear Search input.
            //table.search('').draw(); // Rebind all data.
        });
    });
    //On UpdatePanel Refresh.
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    if (prm != null) {
        prm.add_endRequest(function (sender, e) {
            if (sender._postBackSettings.panelsToUpdate != null) {
                var table =$('[id*=gvCustomers]')
                .prepend($("<thead></thead>")
                .append($(this).find("tr:first")))
                .DataTable({
                    "responsive": true,
                    "sPaginationType": "full_numbers",
                    "bPaginate": true,
                    "bSort": true,
                    "iDisplayLength": 2,
                    "stateSave": true,
                    "stateDuration": 60 * 1
                });
                table.on('page.dt', function () {
                    $('input[type=search]').val(''); // Clear Search input.
                    //table.search('').draw(); // Rebind all data.
                });
            }
        });
    };
</script>

 


Posted 8 months ago

Hi Amol111,

To reset a search filter just call search() again with an empty string. Similarly you can clear the value of an input by setting its value to an empty string.

If you implement this functionality in page navigation then textbox will be cleared. But you are not able to show all records in the gridview.

For show all records you have to redraw the table. If you redraw the table then page navigation will not work.