jQuery DataTable渲染回调函数提取复用后失效问题

你遇到的问题其实是函数引用和函数执行的混淆，咱们一步步来理清楚：

错误原因 #

你现在的调用方式：

{ data: 'FirstStep', render: renderCellItems(data, type, row) }

这里的renderCellItems(data, type, row)是立即执行了这个函数，并把函数的返回值（也就是对应状态的div字符串）赋值给了render属性，但DataTable的render配置项需要的是一个函数引用——它会在渲染单元格的时机自动把data、type、row这三个参数传递给目标函数，而不是让你提前执行它。

解决方案 #

只需要把函数名直接赋值给render，不要加括号和参数：

{ data: 'FirstStep', render: renderCellItems }

这样DataTable在需要渲染这个单元格时，就会自动调用renderCellItems，并传入对应的data、type、row参数，和你之前内联写函数的效果完全一致。

完整代码示例 #

独立的render函数：

function renderCellItems(data, type, row) {
  if (data === 4) {
    return '<div class="red-circle"></div>';
  } else if (data === 3) {
    return '<div class="yellow-circle"></div>';
  } else if (data === 2) {
    return '<div class="blue-circle"></div>';
  } else if (data <= 1) {
    return '<div class="green-circle"></div>';
  }
}

DataTable的columns配置：

columns: [
  { data: 'FirstStep', render: renderCellItems },
  // 其他列配置...
]

额外补充（进阶场景） #

要是你之后需要给这个render函数传递自定义参数，可以用闭包来实现，比如：

function createRenderer(customSuffix) {
  return function(data, type, row) {
    // 这里可以使用自定义的customSuffix参数
    if (data === 4) {
      return `<div class="red-${customSuffix}"></div>`;
    }
    // 其他逻辑...
  }
}

调用时：

{ data: 'FirstStep', render: createRenderer('circle') }

不过这个是进阶用法，你当前的场景用前面的基础方案就足够解决问题了。

内容的提问来源于stack exchange，提问作者Simsons