У меня эта проблема возникает уже несколько недель, и каждый раз, когда я пытаюсь найти решение, мне это не удается, поэтому я надеюсь, что кто-то из вас заметит мою ошибку. Я использовал отладчик с поддержкой данных, который не выдавал ошибок. Я использую таблицы данных в проекте Django со следующей структурой. Javascript в файле со следующим кодом:
function redraw_exceptions(week_limit) {
var table = $('#testTable').DataTable( {
"ajax": {
"method": "GET",
"url": "api/exceptions/data",
"datatype": 'json',
"data": {
"week_limit": week_limit,
"type": 1,
},
"columns": [
{ "data": "col1" },
{ "data": "col2" },
{ "data": "col3", className: "test123" },
]
},
});
}
Затем страница html, где определена таблица и где готов документ, я запускаю функцию javascript.
<table class = "table" id = "testTable">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
</table>
$(document).ready(function() {
redraw_exceptions(4)
})
{%
Теперь возникает проблема. Всякий раз, когда данные json структурированы следующим образом
{"data": [["1", "9908", "171.74"], ["2", "9959", "156.83"], ["3", "457", "153.83"], ["4", "452", "147.73"], ["5", "9927", "141.90"], ["6", "9953", "139.44"], ["7", "9915", "137.75"], ["8", "9935", "135.29"], ["9", "9952", "130.97"], ["10", "9925", "128.79"], ["11", "9934", "128.34"], ["12", "309", "127.73"], ["13", "9957", "126.08"], ["14", "451", "125.56"], ["15", "9945", "125.00"], ["16", "9921", "120.31"], ["17", "9951", "118.22"], ["18", "9926", "118.09"], ["19", "9943", "117.98"], ["20", "9954", "115.22"], ["21", "9901", "115.22"], ["22", "9939", "112.33"]]}
Он работает (так что таблица действительно получает правильные данные), но я не могу добавлять классы в записи таблицы, потому что я думаю, что он не может найти нужные столбцы, поскольку данные не соответствуют JSON. Но когда данные соответствуют JSON, таблица просто не заполняется, и я получаю сообщение об ошибке «Запрошенный неизвестный параметр '0' для строки 0, столбца 0». Тогда данные выглядят так:
{"data": [{"col1": "1", "col2": "9908", "col3": "171.74"}, {"col1": "2", "col2": "9959", "col3": "156.83"}, {"col1": "3", "col2": "457", "col3": "153.83"}, {"col1": "4", "col2": "452", "col3": "147.73"}, {"col1": "5", "col2": "9927", "col3": "141.90"}, {"col1": "6", "col2": "9953", "col3": "139.44"}, {"col1": "7", "col2": "9915", "col3": "137.75"}, {"col1": "8", "col2": "9935", "col3": "135.29"}, {"col1": "9", "col2": "9952", "col3": "130.97"}, {"col1": "10", "col2": "9925", "col3": "128.79"}]}
Я подумал, что это может быть потому, что запрос Ajax также содержит данные, поэтому, когда я изменил данные столбцов, например, на `` тест '', а также сделал это в данных JSON, я больше не получаю ту же ошибку, но я получаю следующую ошибку в моя консоль: 'TypeError: undefined не является объектом (оценка 'f.length') '.
Если кто-нибудь знает, что я могу сделать, чтобы решить эту проблему, я очень ценю это!
Нет ничего плохого в вашем коде jsfiddle.net/k8pyjz5d, вы просто не закрываете правильно секцию ajax, из-за чего columns случайно становится частью ajax.
Это действительно правильный ответ. Кроме того, мне нужно было преобразовать все переменные в строки, прежде чем они будут правильно отображаться в моей таблице данных. Спасибо за помощь!



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


вам нужно использовать columns.createdCell
есть 5 параметров
function createdCell( cell, cellData, rowData, rowIndex, colIndex )
Вы можете использовать для получения более подробной информации https://datatables.net/reference/option/columns.createdCell
В приведенном ниже примере цвет последнего столбца изменяется red при создании события ячейки:
$(document).ready(function() {
redraw_exceptions(4)
})
function redraw_exceptions(week_limit) {
var testdata = [{
"col1": "1",
"col2": "9908",
"col3": "171.74",
}, {
"col1": "2",
"col2": "9959",
"col3": "156.83",
}, {
"col1": "3",
"col2": "457",
"col3": "153.83",
}, {
"col1": "4",
"col2": "452",
"col3": "147.73",
}, {
"col1": "5",
"col2": "9927",
"col3": "141.90",
}];
$('#testTable').DataTable({
"aaData": testdata,
"aoColumns": [
{ "mDataProp": "col1" },
{ "mDataProp": "col2" },
{ "mDataProp": "col3" }
],
"columnDefs": [{
"targets": '_all',
"createdCell": function (td, cellData, rowData, rowIndex, colIndex) {
if (colIndex == 2) {
$(td).css('color', 'red')
}
}
}]
});
}<link rel = "stylesheet" href = "https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table class = "table" id = "testTable">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
</table>Надеюсь, это то, что вам нужно.
@davidkonrad, Он хочет добавить класс в столбец. Он сказал, что «Я не могу добавлять классы в записи таблицы, потому что я думаю, что он не может найти нужные столбцы, поскольку данные не соответствуют JSON».
Привет, @saAction, теперь я вижу, хорошо, но класс буду должен быть добавлен в каждую ячейку столбца, если мы используем className (попробуйте проверить col3 в моей скрипке выше). createdCell больше подходит, если вы хотите дальше манипулировать узлом DOM или, возможно, хотите добавить разные классы в разные ячейки. Но если вам просто нужно добавить класс ко всем <td></td>, в столбце className подойдут нужды. Просто говорю :)
Вы попробовали: "columnDefs": [{className: "test123", "target": [0]}] Ссылка: datatables.net/reference/option/columns.className