jQuery DataTables plugin with JSON data source taking multiple POST requests on global search

Question

Friends,

I'm using jQuery DataTables plugin. I'm doing the Server Side Processing with JSON datasource to fill the DataTable as showing in the example

Here's my code

HTML

<Table class="projectGrid DataTable display" id="tblList" width="100%">
<thead>
    <tr>
        <th align="center">
            Created
        </th>
        <th align="center">
            Assigned
        </th>
        <th align="center">
            Stage
        </th>
        <th align="center">
            Priority
        </th>
        <th align="center">
            Status
        </th>
    </tr>
</thead>
<tfoot>
    <tr>
        <th align="center">
            Created
        </th>
        <th align="center">
            Assigned
        </th>
        <th align="center">
            Stage
        </th>
        <th align="center">
            Priority
        </th>
        <th align="center">
            Status
        </th>
    </tr>
</tfoot>
<tbody>
    <asp:Repeater ID="reptList" runat="server">
        <ItemTemplate>
            <tr>
                <td align="center">
                    <%#Eval("CreatedBy")%>
                </td>
                <td align="center">
                    <%#Eval("AssignedTo")%>
                </td>
                <td align="center">
                    <%#Eval("Stage")%>
                </td>
                <td align="center">
                    <%#Eval("Priority")%>
                </td>
                <td align="center">
                    <%#Eval("Status")%>
                </td>
            </tr>
        </ItemTemplate>
    </asp:Repeater>
</tbody>
</table>

JavaScript

<script type="text/javascript">
var data =
{
    datatableConfig: {
        "aaSorting": [],
        "processing": true,
        "serverSide": true,
        "ajax": {
            url: "~/IssueData.asmx/GetIssueList",
            type: "POST"
        },
        "columns": [
            { "data": "0" },
            { "data": "1" },
            { "data": "2" },
            { "data": "3" },
            { "data": "4" }
        ]
    }
}

$(data.datatable + ' tfoot th').each(function () {
    var title = $(this).text();
    if (!$(this).hasClass('hidden')) {
        $(this).html('<input type="text" class="footerInput" style="width:' + ($(this).width() - 10) + 'px" placeholder="Filter ' + $.trim(title) + '" />');
    }
});

// Apply Datatable
if ($(options.datatable).length) {
    table = $(options.datatable).DataTable(options.datatableConfig);
}

// Apply the search
table.columns().every(function () {
    var that = this;

    $('input.footerInput', this.footer()).on('change', function () {
        if (that.search() !== this.value) {
            that.search(this.value).draw();
        }
    });
});
</script>

Everything is working fine, except Search. When I enter single letter in a Search, It raises 3-4 Ajax POST Requests. Any Idea why it processes more POST requets on single keypress event?

Answer 1

You can use below code to apply search so when user press 'enter' key ajax request is made to search :

// Apply the search
table.columns().every(function () {
    var that = this;

    $('input.footerInput', this.footer()).on('keyup', function (e) {
        if (e.keyCode == 13 && $.trim(this.value) !== '') {
            that.search(this.value).draw();
        }
    });
});