数据表fnDraw生成多个ajax请求

问题描述 投票:2回答:4

当我手动重绘(通过按钮点击)时,我的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)并且它通过设置断点来击中我的动作两次。我找不到任何理由这样做。谢谢!

jquery datatables
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;
            },

0
投票

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

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

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


0
投票

那真是怪了。 dataTable.fnDraw();应该发送一个AJAX电话。也许你应该查看插件脚本,看看那里发生了什么。但首先尝试新版本:)

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


0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.