Question

我在点击批准按钮并且ajax请求成功后尝试重绘数据表。

一切都在点击功能中运行（它保存到数据库，它会动画，它会向上滑动）但是表格没有重绘。

是否有任何机构对其无效的原因有任何想法？

  $('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调用中包含一个缓存：“false”设置，如下所示：

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

Datatables会对此产生额外的影响：默认情况下，它会为您关闭缓存（自1.7版开始）。因此，如果您只是设置一个ajax url，数据表应该更新ok：

$("#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中的一行，并且您想要从dataTable中删除它。

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.
        });

如果只更改了一行，则删除该行，以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);
}
});

ajax请求成功重绘数据表

4 个答案: