Jatery Datatables запросил проблему с неизвестным параметром

Question

У меня есть эта проблема в течение нескольких недель, и каждый раз, когда я пытаюсь найти решение, у меня не получается, поэтому я надеюсь, что кто-то из вас заметит мою ошибку. Я использовал отладчик данных, который не дал ошибок. Я использую таблицы данных в проекте 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 также содержит данные, поэтому, когда я изменил данные столбцов, например, «test», а также сделал это в данных JSON, я больше не получаю ту же ошибку, но я получаю следующая ошибка в моей консоли: ' TypeError: undefined не является объектом (оценка' f.length ')'.

Если кто-нибудь знает, что я могу сделать, чтобы решить эту проблему, я очень ценю это!

Answer 1

вам нужно использовать 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>

Надеюсь, это то, что вы хотите.