JQuery Datatable Serverside - Search on Enter

loksher

Hi everyone,
This is Loksher, and I'm new to using Jquery Datatable (two weeks). I wanted to generate reports using .net MVC and Jquery Datatatable using server side processing and I was able to create a working Jquery datatable report, thanks to datatables.net. This forum helped me get there. I have couple of minor issues which Im still trying to figure out. One of them is to pass the search criteria after pressing 'Enter' key rather than calling an API every single time, the keystroke is detected. So before posting this question here in the forum, I went through the forums where people had similar issues, and applied the recommended fixes, but after spending a day's time , trying different approaches, I wasnt able to figure out the issue. I will post my code here, and if someone can help me with this issue, that will be great. I used unbind and bind on keyup function, while 'unbind' is working (no API call after every keystroke), but bind is not working.
NOTE:
jquery.dataTables.min.js: version 1.10.9
jquery.js: version v1.12.0
jquery.dataTables.js: version 1.10.11
dataTables.tableTools.js: version 2.2.3

@{
    ViewBag.Title = "Detailed";
}
1.10.9
<div style="width:95%; margin:0 auto;">
    <table id="DetailedTable">
        <thead>
            <tr>
                <th>First Name</th>
                <th>Mid</th>
                <th>Last Name</th>
                <th>Start Date</th>
                <th>End Date</th>
            </tr>
        </thead>
    </table>
</div>
<style>
    tr.even {
        background-color: #F5F5F5 !important;
    }
</style>
@* Load datatable css *@
<link href="~/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="~/css/jquery.dataTables.css" rel="stylesheet" />
<link href="~/css/dataTables.tableTools.css" rel="stylesheet" />
@* Load datatable js *@
@section Scripts{
    <script src="~/Scripts/jquery.dataTables.min.js"></script>
    <script src="~/Scripts/jquery.js"></script>
    <script src="~/Scripts/jquery.dataTables.js"></script>
    <script src="~/Scripts/dataTables.tableTools.js"></script>

    <script>
        $(document).ready(function () {
            var Table = $('#DetailedTable').DataTable({
                dom: 'T<"clear">lfrtip',
                tableTools: {
                    "sSwfPath": "http://cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf",
                    "sRowSelect": "os",
                    "sRowSelector": 'td:first-child',
                    "aButtons": [
                        "xls",
                        {
                            "sExtends": "pdf",
                            "sPdfOrientation": "landscape",
                            "sPdfMessage": "Detailed Report"
                        },
                        {
                            "sExtends": "print",
                            "bShowAll": false
                        }
                        
                    ]
                },
                "scrollX": true,
                "serverSide": true,
                "ajax": {
                    "url": "GetDetailed",
                    "type": "POST",
                    "datatype": "json"
                },
                "bLengthChange": false,
                "searchHighlight": true,
                "processing": true,
                "autoWidth": false,
                "responsive": true,
                "bSort": true,
                "bInfo": false,
                "bFilter": true,
                "pageLength": 10,

                "columns" : [
                        { "data": "Report.FirstName", "autoWidth": true,
                            "searchable": true,
                            "sortable": true
                        },
                        {
                            "data": "Report.MiddleName",
                            "searchable": false,
                            "sortable": false,
                            "autoWidth": true
                        },
                        {
                            "data": "Report.LastName", "autoWidth": true,
                            "searchable": true,
                            "sortable": true,
                        },
                        {
                            "data": "Report.StartDate",
                            "autoWidth": true,
                            "searchable": false,
                            "sortable": true,
                            "render": function (startDate) {
                                if (!startDate) {
                                    return "NA";
                                }
                                else {
                                    var date = new Date(parseInt(startDate.substr(6)));
                                    var month = date.getMonth() + 1;
                                    return month + "/" + date.getDate() + "/" + date.getFullYear();
                                }
                            }
                        },
                        {
                            "data": "Report.EndDate",
                            "autoWidth": true,
                            "searchable": false,
                            "sortable": true,
                            "render": function (endDate) {
                                if (!endDate) {
                                    return "NA";
                                }
                                else {
                                    var date = new Date(parseInt(endDate.substr(6)));
                                    var month = date.getMonth() + 1;
                                    return month + "/" + date.getDate() + "/" + date.getFullYear();
                                }
                            }
                        }
                    ]
            });
            
            $('#DetailedTable_filter input').unbind();
            $('#DetailedTable_filter input').bind('keyup', function(e) {
                if (e.keyCode == 13) {
                    Table.fnFilter($(this).val());
                }
            });
            
        });
    </script>
}

loksher

Found the issue.

var Table = $('#DetailedTable').dataTable NOT
var Table = $('#DetailedTable').DataTable

allan

If you want to use legacy API methods such as fnFilter then yes, you would use the $().dataTable() form. For the modern methods such as search() you use the $().DataTable() form.

Allan