jquery - ajax请求成功重绘数据表

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

数据表为此带来了额外的麻烦:默认情况下，它们会为您关闭缓存(自 v. 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);
            }
        });
    }
});

希望这对某人有帮助。