2

当我手动重绘（通过单击按钮）时，我的 jquery 数据表似乎发布了两次 - 如何防止数据表这样做？

这是我的客户端代码：

$(document).ready(function () {
    dataTable = $('#Results').dataTable({
        "bLengthChange": true,
        "bFilter": false,
        "bSort": true,
        "bInfo": true,
        "bAutoWidth": false,
        "sPaginationType": "bootstrap",
        "sDom": "ftrpli",
        "bServerSide": true,
        // "sAjaxSource": "AjaxControllerAction",
        "fnServerParams": function (aoData) {
            aoData.push({ "name": "UserId", "value": $('#UserId').val() });
            aoData.push({ "name": "Data", "value": $('#Data').val() });
            aoData.push({ "name": "Location", "value": $('#Location').val() });
        },
        "fnServerData": function (sSource, aoData, fnCallback) {
            showProgress();

            var headers = {};
            headers['__RequestVerificationToken'] = token;
            alert('zzzz');

            $.ajax({
                dataType: 'json',
                type: 'POST',
                //url: sSource,
                url: 'AjaxControllerAction',
                data: aoData,
                headers: headers,
                success: function (json) {
                    hideProgress();

                    fnCallback(json);
                },
                error: function (json) {
                    hideProgress();
                }
            });
        },
        "fnDrawCallback": function () { hideProgress(); },
        "bProcessing": false,
        "aoColumns": [
                { "sName": "NAME",
                    "fnRender": function (oObj) {
                        return '<a href="Details/' +
                        oObj.aData[0] + '">' + oObj.aData[0] + '</a>';
                    }
                },
                { "sName": "DATA" },
                { "sName": "DATA1" },
                { "sName": "DATA2" },
                ]
    });
}
);

$("#SearchForm").on("submit", function (event) {
    event.preventDefault();
    // this sends the request twice ??
    dataTable.fnDraw();
});

我知道它击中了我的 AjaxControllerAction 两次，从使用两个萤火虫（我看到 xmlhttprequest 两次）和它通过设置断点击中我的动作两次。我找不到它会这样做的任何理由。谢谢！

4

4 回答 4

1

我的解决方案

我使用了数据表中的参数： iDisplayStart -> 在当前数据集中显示起点。

第 1 步：创建一个全局变量来持久化数据。

var options = {
    jsonResultDataTableFromServer: {},
    iDisplayStart: -1,
    iDisplayLength : -1
};

第 2 步：将 ajax fnServerData 函数更改为：

"fnServerData": function(url, data, callback) {
               //data[3] i.e iDisplayStart
               //data[4] i.e iDisplayLength
               if (options.iDisplayStart != data[3].value || options.iDisplayLength != data[4].value) {
                    options.iDisplayStart = data[3].value;
                    options.iDisplayLength = data[4].value;

                    $.ajax({
                        "url": url,
                        "data": data,
                        //"success": callback,
                        "success": function(json) {
                            options.jsonResultDataTableFromServer = json;
                            callback(json);
                        },
                        "contentType": "application/x-www-form-urlencoded; charset=utf-8",
                        "dataType": "json",
                        "type": "POST",
                        "error": function() {
                            alert("DataTables warning: JSON data from server failed to load or be parsed. " +
                                "This is most likely to be caused by a JSON formatting error.");
                        }
                    });
                } else {
                    options.jsonResultDataTableFromServer.sEcho = eval(options.jsonResultDataTableFromServer.sEcho) + 1;
                    callback(options.jsonResultDataTableFromServer);
                }

                return false;
            },
于 2014-03-27T14:39:30.197 回答
0

这很奇怪。dataTable.fnDraw();应该发送一个 AJAX 调用。也许您应该查看插件脚本，看看那里发生了什么。但首先尝试新版本:)

我正在尝试在重绘时禁用该 AJAX 调用。如果我找到解决方案，我会在这里发布

于 2013-10-16T05:40:22.727 回答
0

我在使用 jQuery dataTable 1.9（旧版）时遇到了类似的问题。我正在调用 table.dataTable 来准备 AJAX POST 连接，然后我正在调用 fnDraw。结果发现根本不需要对 fnDraw 的第二次调用，这消除了第二个 Ajax 请求（table.dataTable 和 fnDraw 都放在了显示表格的 jsp 中的 $(document).ready 函数中）。table.dataTable 单独处理所有功能（使用新标准调用控制器）。初始控制器调用显示了默认视图。当用户单击列的排序图标时，再次调用控制器以传递新的排序标准并生成正确的 SQL 查询。当用户点击分页图标时，控制器被调用并为分页生成正确的 SQL 查询。

于 2014-07-15T23:01:37.537 回答
0

这可能是因为您使用了类似的名称“dataTable”作为您初始化数据表的变量

dataTable = $('#Results').dataTable({

这可能是您手动重绘时数据表绘制两次的原因。尝试更改变量名称并查看。

于 2012-10-04T11:34:06.280 回答