jquery datatables 列渲染：多个 Ajax 调用

Posted 2023-02-22

【中文标题】jquery datatables 列渲染：多个 Ajax 调用

【英文标题】：jquery datatables column render: Multiple Ajax Calls

【发布时间】：2018-06-14 10:48:01

【问题描述】：

以下代码在我的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;
            

【问题讨论】：

那么你的问题是什么？

为什么会重复调用？

【参考方案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/

【讨论】：

我认为您可能正在做某事，但现在该列甚至没有显示任何数据——它应该显示。谢谢

还是没有运气。我的一些“数据”变量可能为空，它们在尝试转换为日期时会产生 ColdFusion 错误，但仍然 [ if (data.length > 5 && type == 'display') ] 会导致多次调用。谢谢。

谢谢。有点在黑暗中玩耍。

@Meengla，好的，请参阅更新。希望你能适应它。您可以删除 cmets。

"...have 3 Date columns using Ajax" 这就是为什么处理的状态需要存储在设置列对象本身中（或者在数组的外部字典中）我不认为它特别“长”；您将在任何情况下都需要返回值，在 ajaxing 时也是如此；您将需要有一种“聪明”的方式来跟踪处理状态，并以正确的方式将 ajaxed 值延迟插入 DataTables 内部。