Изменение размера чувствительного DataTable очень медленно, как я могу ускорить его?

Question

У меня есть DataTable, в котором есть несколько тысяч записей.

У меня есть адаптивный плагин для него, и включен ответный параметр.

Я также попытался включить опцию deferRender, но это, казалось, не повлияло на время.

При изменении размера браузера происходит отсрочка 1 с - 2 с. Это происходит в IE11 и MS Edge. Производительность в хроме не фантастическая, но в 0,5 с она терпима.

Я использую функцию пользовательского заказа, но эти функции для краткости опущены. Я уверен, что знаю, где проблема, и это не в них. Я могу предоставить их, если потребуется.

Вот мой код инициализации:

this._dataTable = $("#listtable").DataTable({ 
    paging: true, 
    responsive: true, 
    deferRender: true, 
    columns: [{ 
     title: "Name", 
     data: "thing.name" 
    }, { 
     title: "State 1", 
     data: "state1", 
     type: "state1", 
     render: (data, type, row, meta) => { 
      return this._renderState1(data, meta); 
     } 
    }, { 
     title: "State 2", 
     data: "state2", 
     type: "state2", 
     render: (data, type, row, meta) => { 
      return this._renderState2(data, meta); 
     } 
    }] 
}); 

загружает данные по телефону dataTable.row.add для каждого элемента, а затем вызвать dataTable.draw в конце.

Проблемы с производительностью возникают после того, как все данные были успешно загружены, поэтому я не думаю, что это связано с этим.

Копаем дальше в информации профилировщика я обнаружил, что это был рендеринг строк, был вопрос:

закомментировав код в моем обычае визуализации функций, показанных в коде initalisation, Я обнаружил, что проблема лежала с поиском, содержащей ячейки, чтобы установить цвет фона:

var cell = this._dataTable 
    .cell({ row: meta.row, column: meta.col }) 
    .node(); 

Вот остальную часть кода для установки цвета фона:

var cellClass = this._getStateClass(state); 
$(cell).addClass(cellClass); 

Если я прокомментирую выходную строку ячейки, производительность не удивительна, но приемлема.

Так что мой вопрос, как я могу иметь собственный цвет фона для ячеек, а ответная сохранением производительности?

Быстрая альтернатива dataTable.cell, как и альтернативный подход к настройке цвета фона.

Answer 1

Мне удалось решить эту проблему, удалив необходимость найти ячейку.

Я положил класс на столбцы, которые удалили прокладку, которую они имеют.

Стиль:

.cell-state1 { 
    padding: 0; 
} 

Конфигурация:

this._dataTable = $("#listtable").DataTable({ 
    paging: true, 
    responsive: true, 
    deferRender: true, 
    columns: [{ 
     title: "Name", 
     data: "thing.name" 
    }, { 
     title: "State1", 
     data: "state1", 
     type: "state1", 
     className: "cell-state1", 
     render: (data, type, row, meta) => { 
      return this._renderState1(data, meta); 
     } 
    }] 
}); 

Тогда я изменил мои делают функции, чтобы они вернули содержимое в DIV, который заполнил ячейку, имели цвет фона, и добавили отступы . назад в

Стиль:

.cell-state1-somestate { 
    height: 100%; 
    width: 100%; 
    padding: 8px; 
    background-color: #000000; 
    color: #ffffff; 
} 

Рендер Функция:

function _renderState1 (state1) { 
    var cssClass = _this._getState1CellClass(state1); 
    var text = _this._getState1CellText(state1); 
    var content = "<div class='" + cssClass + "'>" + text + "</div>"; 
    return content; 
}; 

Это оставило меня один последний вопрос.

У меня есть пользовательские функции заказа, и теперь вместо того, чтобы передавать текстовое значение, они передаются div, содержащее текстовое значение.

я использовал немного JQuery для извлечения текста:

var floodAlertSeverity = $(content).html();.

Было бы неплохо, если бы функции заказа получили исходные данные, а не отображаемые данные, но хорошо.