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

У меня эта проблема возникает уже несколько недель, и каждый раз, когда я пытаюсь найти решение, мне это не удается, поэтому я надеюсь, что кто-то из вас заметит мою ошибку. Я использовал отладчик с поддержкой данных, который не выдавал ошибок. Я использую таблицы данных в проекте 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') '.

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

Вы попробовали: "columnDefs": [{className: "test123", "target": [0]}] Ссылка: datatables.net/reference/option/columns.className

Sigma 08.09.2018 12:08

Нет ничего плохого в вашем коде jsfiddle.net/k8pyjz5d, вы просто не закрываете правильно секцию ajax, из-за чего columns случайно становится частью ajax.

davidkonrad 08.09.2018 15:02

Это действительно правильный ответ. Кроме того, мне нужно было преобразовать все переменные в строки, прежде чем они будут правильно отображаться в моей таблице данных. Спасибо за помощь!

Stefan1993 11.09.2018 09:43
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
3
256
1

Ответы 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>

Надеюсь, это то, что вам нужно.

@davidkonrad, Он хочет добавить класс в столбец. Он сказал, что «Я не могу добавлять классы в записи таблицы, потому что я думаю, что он не может найти нужные столбцы, поскольку данные не соответствуют JSON».

saAction 08.09.2018 18:42

Привет, @saAction, теперь я вижу, хорошо, но класс буду должен быть добавлен в каждую ячейку столбца, если мы используем className (попробуйте проверить col3 в моей скрипке выше). createdCell больше подходит, если вы хотите дальше манипулировать узлом DOM или, возможно, хотите добавить разные классы в разные ячейки. Но если вам просто нужно добавить класс ко всем <td></td>, в столбце className подойдут нужды. Просто говорю :)

davidkonrad 08.09.2018 18:52

Другие вопросы по теме