Question

当我手动重绘（通过按钮点击）时，我的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，使用两个firebug（我看到xmlhttprequest两次）并且它通过设置断点来击中我的动作两次。我找不到任何理由这样做。谢谢！

Answer 1

这可能是因为您使用类似名称“dataTable”作为已使用

初始化数据表的变量

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

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

Answer 2

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

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

Answer 3

我的解决方案

我使用了datatables中的参数： iDisplayStart - ＆gt;显示当前数据集中的起始点。

第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;
            },

Answer 4

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

数据表fnDraw生成多个ajax请求

4 个答案: