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?

ranakrunal9 · Accepted Answer · 2015-12-01 10:30:39Z

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();
        }
    });
});

answered Dec 1, 2015 at 10:30

ranakrunal9

13.6k3 gold badges44 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SRK Over a year ago

Interesting.. How to apply this on Global Search?

ranakrunal9 Over a year ago

For applying it on global you have to unbind key press event of datatable search using $('#tblList').find('.filter-input').unbind(); where "filter-input" is class of search input field. and after it you have to bind keyup event of is as : $('#tblList').delegate('.filter-input', 'keyup', function (e) { if (e.keyCode === 13 && $.trim($(this).val()) !== '') { table.api().search($(this).val()).draw(); } });

Collectives™ on Stack Overflow

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

HTML

JavaScript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML

JavaScript

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related