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

Last Reply one month ago By dharmendr

Posted one month 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>

 

You are viewing reply posted by: dharmendr one month ago.
Posted one month 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>