ajax请求成功重绘数据表

Question

我正在尝试在单击批准按钮后以及 ajax 请求成功后重绘数据表。

一切都在 click 函数中工作（它保存到 db，它动画，它向上滑动）但是 表格不会重绘。

有没有人知道它为什么不工作？

  $('a.approve').click(function(e) {
    e.preventDefault();
    var parent = $(this).closest("tr");
    $.ajax({
      type: 'get',
      url: 'index.php',
      data: 'ajax=1&approve='+ parent.attr('id').replace('record-','')+'&employee='+ parent.attr('title')+'&acyear=' + parent.attr('lang'),
      beforeSend: function() {
        parent.animate({'backgroundColor':'#fb6c6c'},300);
      },
      success: function() {
        parent.slideUp(300,function() {
          parent.remove();
        var $aTable= $("#table_a").dataTable( { bRetrieve : true } );
        var $bTable= $("#table_b").dataTable( { bRetrieve : true } );
        $aTable.fnDraw();
        $bTable.fnDraw();
        });

      }
    });
  });

Answer 1

聚会有点晚了，但我刚刚经历了这一切，所以我想我会把答案留在这里。

默认情况下，JQuery 不会阻止缓存 ajax 响应。 Chrome 和 Firefox 似乎无论如何都不会缓存这些调用，所以它们更新得很好。另一方面，IE 总是缓存 ajax 响应，即使是硬页面刷新也不会刷新它们。解决方案是始终在您的 ajax 调用中包含一个 cache: "false" 设置，如下所示：

$.ajax({
    type: 'get',
    cache: false,
    url: 'index.php',
    data: 'ajax=1',
    success: function() {
      ...
    }
);

数据表为此带来了额外的变化：默认情况下，它们会为您关闭缓存（从 1.7 版开始）。所以如果你只是设置了一个 ajax url，一个数据表应该可以更新：

$("#myTable").dataTable({
    "bProcessing": true,
    "sAjaxSource": "getAssayBatches.json",  // URL that retrieves the data
    // datatable leaves caching off by default. Table refreshes ok!
});

但是，如果您需要做一些额外的处理并覆盖“fnServerData”函数，您会丢失默认缓存设置，这意味着缓存会重新打开：

$("#myTable").dataTable({
    "bProcessing": true,
    "sAjaxSource": "getAssayBatches.json",  // URL that retrieves the data

    // the following parameter turns caching back on, meaning stale data in IE!
    "fnServerData": function (sSource, aoData, fnCallback) {
        $.getJSON(sSource, aoData, function (json) {
            var data = {"aaData": json};
            fnCallback(data);
        });
    }
});

所以你也需要在此处放置 cache: false 以确保表得到更新：

$("#myTable").dataTable({
    "bProcessing": true,
    "sAjaxSource": "getAssayBatches.json",  // URL that retrieves the data

    // same ajax call as above, but this time with cache: false 
    // to ensure the table gets updated
    "fnServerData": function (sSource, aoData, fnCallback) {
        $.ajax({
            type: "GET",
            cache: false,
            url: sSource,
            data: aoData,
            success: function (json) {
                var data = {"aaData": json};
                fnCallback(data);
            }
        });
    }
});

希望这对某人有所帮助。

Answer 2

我没有看到足够多的代码来了解您的确切需求。

我猜您的 parent var 代表您的一个数据表中的一行，并且您想从数据表中删除它。

dataTable 保留其数据的内部缓存，调用parent.remove() 不会更新此缓存。

如果你想从dataTable中删除一行，你应该使用API​​函数fnDeleteRow：

// remove your "parent.remove()" line
$aTable.fnDeleteRow(parent[0])

Answer 3

为了从数据库中获取新的表数据，您的index.php 需要将表值作为 JSON 返回：

{
  "sEcho": 1,
  "iTotalRecords": "2",
  "iTotalDisplayRecords": "2",
  "aaData": [
    [
      "Gecko",
      "Firefox 1.0",
      "Win 98+ / OSX.2+",
      "1.7",
      "A"
    ],
    [
      "Gecko",
      "Netscape Navigator 9",
      "Win 98+ / OSX.2+",
      "1.8",
      "A"
    ]       ]
}

以及成功的部分：

success: function(json) {
        parent.slideUp(300, function() {
            parent.remove();

            var obj = JSON.parse(json);//get new data
            oTable.fnClearTable();//clear table
            for (x in obj.aaData)
                oTable.fnAddData(obj[x]); //populate table

            //redo another ajax if you have several table.
        });

如果只更改了 1 行，则删除该行，以 JSON 格式从服务器返回该行，然后将该行重新插入表中。

Answer 4

oTable.fnReloadAjax();成功后结果重新绑定表

$(document).ready(function () {

$.fn.dataTableExt.oApi.fnReloadAjax = function (oSettings, sNewSource, fnCallback, bStandingRedraw) {
    if (typeof sNewSource != 'undefined' && sNewSource != null) {
        oSettings.sAjaxSource = sNewSource;
    }
    this.oApi._fnProcessingDisplay(oSettings, true);
    var that = this;
    var iStart = oSettings._iDisplayStart;
    var aData = [];

    this.oApi._fnServerParams(oSettings, aData);

    oSettings.fnServerData(oSettings.sAjaxSource, aData, function (json) {
        /* Clear the old information from the table */
        that.oApi._fnClearTable(oSettings);

        /* Got the data - add it to the table */
        var aData = (oSettings.sAjaxDataProp !== "") ?
            that.oApi._fnGetObjectDataFn(oSettings.sAjaxDataProp)(json) : json;

        for (var i = 0; i < aData.length; i++) {
            that.oApi._fnAddData(oSettings, aData[i]);
        }

        oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
        that.fnDraw();

        if (typeof bStandingRedraw != 'undefined' && bStandingRedraw === true) {
            oSettings._iDisplayStart = iStart;
            that.fnDraw(false);
        }

        that.oApi._fnProcessingDisplay(oSettings, false);

        /* Callback user function - for event handlers etc */
        if (typeof fnCallback == 'function' && fnCallback != null) {
            fnCallback(oSettings);
        }
    }, oSettings);
}
});