jquery datatable global search on keypress of enter key instead of any key keypress

datatable global search on keypress of enter key instead of any key keypress


We can use search feature by pressing "enter key" instead of key press search...

We need to add below code,


$('#myTable_filter input').unbind();
    $('#myTable_filter input').bind('keyup'function (e) {
        if (e.keyCode == 13) {
            table.search(this.value).draw();
        }
    });

Full code of bind datatable

var table = "";
var apisitename = 'http://localhost/DemoApp/api/'; 

$(document).ready(function () {
     
    table = $("#myTable").DataTable({
        "processing": true,
        "serverSide": true,
        "searching": true,
        "ordering": true,
        "paging": true,
        "responsive": true,
        "ajax": {
            "url": apisitename + "CountriesList",
            "type": "get",
            "datatype": "json" 
        },
        "columns": [
            { "data": "Name", "name": "Name"},
            {
                data: null,
                orderable: false,
                width: 100,
                render: function (data, type, row) { 
                    return "<a href='country/detail/?id=" + data.ID + "' class='btn btn-primary btn-small-x fa fa-search'></a>";
                }
            }
        ]
    });

    $('#myTable_filter input').unbind();
    $('#myTable_filter input').bind('keyup', function (e) {
        if (e.keyCode == 13) {
            table.search(this.value).draw();
        }
    });

});


HTML 

 <table id="myTable" class="display responsive nowrap" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>Country Name</th>
                        <th>Action</th>
                    </tr>
                </thead>
            </table>

Hope this will help you and save your time.

Enjoy !!!

:)

No comments:

Post a Comment