Проблема с таблицей данных jQuery с функцией обратного вызова рендеринга

Question

Я добавляю div к моей jQuery dataTable, используя функцию обратного вызова рендеринга:

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

Проблема заключается в том, что в настоящее время вы предоставляете ответ от этой функции как свойство 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));