jquery datatables 列渲染：多个 Ajax 调用

Question

以下代码在我的ColumnDefs 部分DataTables 表的初始化中。在 FireBug 中，我注意到每列对我的 ColdFusion CFC 的调用两次 - 这是低效的。请注意以下代码基于：Data table column rendering with ajax response。

更新 1 这是大部分代码——注意，并非所有列及其渲染都出现在此代码中。 https://docs.google.com/document/d/1t9vERsngpporbrU-FbE9esjt-KHL0qjLK076qkldGZ8/edit?usp=sharing

{
    "targets": 11, /* Date Created */
     "render": function (data, type, row, meta) { 
      var currentCell = $("#table_main_admin").DataTable().cells({"row":meta.row, "column":meta.col}).nodes(0);
           $.ajax({ 
            url: 'date_conversions.cfc',  
            dataType: 'json',
            data: {method: 'format_date_via_coldfusion', date_input: data}, 
            }).done(function (success) { $(currentCell).html(success.mydate); });
            return null;
          }  
}

Answer 1

为什么会重复调用？

因为所有请求类型都调用了渲染回调 - 即 display、filter、sort 和 type。在您的情况下，它最初每行调用两次

• display 一次，即检索数据
• filter 的第二次，因为您在列上有一个顺序，至少是默认顺序

显然，除了第一个 AJAX 请求之外的任何内容都是多余的。通常，您可以通过在type 上进行测试来避免连续请求，但是您有一个使用 AJAX 的设​​置，其中值应该被延迟注入。

上面通过 DOM 插入 success.mydate 的解决方案实际上是更糟糕的部分：它永远不会起作用，因为在下次绘制时会忘记任何值。而且你也不能简单地返回success.mydate（经典的异步问题）

我会建议您在meta.settings.aoColumns[] 中维护一个已处理（ajaxed）值的列表（这样您就可以在同一个表中拥有多个具有该设置的列）。

• 在第一个答案中提到，检查type是否是一种display；这是第一个请求，也是您想要/需要处理的唯一请求。

• 然后检查您是否已经处理了该行的列，如果没有，则执行 ajax 操作并在done() 中通过 API更新处理后的值和单元格！

• 同时返回一个虚拟字符串或data 的初始值。

• 在所有其他情况下，从meta.settings.aoColumns[]返回处理后的值

我无法准确复制您的上述设置，但方案如下：

render: function(data, type, row, meta) {
  if (!meta.settings.aoColumns[meta.col]._processed) {
    meta.settings.aoColumns[meta.col]._processed = []
  }  
  var processed = meta.settings.aoColumns[meta.col]._processed 
  if (type == 'display') {
    if (!processed[meta.row]) {
      processed[meta.row] = 'waiting ...' + meta.row

      $.ajax({
        url : 'https://api.myjson.com/bins/avxod'
      }).done(function(success) {
        var fakeVal = 'Ok, done '+meta.row //success.mydate
        processed[meta.row] = fakeVal

        //update through the API 
        $('#example')
          .DataTable()
          .cell({ row: meta.row, column: meta.col })
          .data( fakeVal )
          .invalidate()

      })
      return processed[meta.row]
    } else {
      return processed[meta.row]
    }
  } else {
    return processed[meta.row]
  }   
}

我相信这是非常失败的证明。这是一个演示 -> http://jsfiddle.net/0bsbw6gt/