javascript - 带有渲染回调函数的 jQuery 数据表问题

Question

我正在使用渲染回调函数向我的 jQuery dataTable 添加一个 div:

columns: [
            {
                data: 'FirstStep',
                render: function (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>';
                    }
                }
            },
            --Other columns 
            }
        ]

这工作正常，但如果我将渲染调用提取回一个函数(需要重复使用几次)并尝试如下代码，它不起作用。

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>';
        }
    }

......................

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

Answer 1

问题是因为您目前正在从该函数提供 response 作为 render 属性，即。 HTML 字符串，但该属性需要一个函数。

您需要提供对该函数的引用。为此，请删除尾随的括号和参数:

{
  data: 'FirstStep',
  render: renderCellItems
}

另请注意，您可以通过使用数组来存储返回值来改进逻辑:

function renderCellItems(data, type, row) {
  var classes = ['green-circle', 'blue-circle', 'yellow-circle', 'red-circle'];
  return '<div class="' + classes[Math.max(data, 1) - 1] + '"></div>';
}

console.log(0, renderCellItems(0));
console.log(1, renderCellItems(1));
console.log(2, renderCellItems(2));
console.log(3, renderCellItems(3));
console.log(4, renderCellItems(4));