带有JSON数据源的jQueryDataTables插件在全局搜索中接受多个POST请求

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

本文关键字：请求 POST 全局搜索数据源 JSON jQueryDataTables 插件带有更新时间：2023-09-26

朋友，

我使用的是jQuery DataTables插件。我正在使用JSON数据源进行服务器端处理，以填充示例中显示的DataTable

这是我的代码

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>

一切都很好，除了搜索。当我在搜索中输入单个字母时，它会引发3-4个Ajax POST请求。知道为什么它在单个按键事件上处理更多POST请求吗？

您可以使用以下代码应用搜索，这样当用户按下"回车"键时，就会发出ajax请求进行搜索：

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