Невозможно повторно инициализировать JQuery DataTable

Я использую jquery datatables для отображения данных внутри сетки. На загрузке начальной страницы script возьмите DateTime.Today и обработайте их дальше, проблема возникает после загрузки начальной страницы, когда я пытаюсь ввести дату ввода пользователей для дальнейшего процесса. У меня ошибка.

Предупреждение DataTables (таблица id = 'dataTable'): Невозможно повторно инициализировать DataTable. Чтобы получить объект DataTables для этой таблицы, не передайте аргументы или не увидите документы для bRetrieve и bDestroy

function getDate() {
    var date = $('input[name="myDate"]').val();
    return date;
}

$('#myDate').click(updateDate);

function updateDate() { 
    $('#dataTable').dataTable({
        "bServerSide": true,
        "sAjaxSource": "/Home/Ajax",
        "fnServerParams": function (aoData) {
            var date = getDate();
            aoData.push({ "name": "myDate", "value": date });
        },
        //... there more
}

updateDate();

Script помещается в нижней части страницы.

Ответ 1

Попробуйте добавить "bDestroy": true для литерала объектов опций, например

$('#dataTable').dataTable({
    "bServerSide": true,
    ....
    "bDestroy": true
});

Ответ 2

Я знаю, что это вопрос OLD. Но это для тех, кто имеет аналогичную проблему.

Вы должны уничтожить старое назначение dataTable. Перед созданием нового datatable используйте следующий код

$("#dataTable").dataTable().fnDestroy();

Ответ 3

API DataTables изменился, но эта ошибка все еще возникает, если вы попытаетесь снова инициализировать возвращаемый datatable.

Вы можете проверить, уже ли он создан:

$.fn.DataTable.isDataTable("#myTable")

И уничтожить его так, чтобы его можно было снова воссоздать:

$('#myTable').DataTable().clear().destroy();

Это не самый эффективный способ, но он работает. Должно быть возможно обновить таблицу, не уничтожая ее сначала, просто используя clear и row.add, но я не нашел способ сделать это, когда источником данных является массив, переданный конструктору.

Ответ 4

Первое, что вы хотите сделать, это очистить и уничтожить ваши данные.

var tables = $.fn.dataTable.fnTables(true);

$(tables).each(function () {
  $(this).dataTable().fnClearTable();
  $(this).dataTable().fnDestroy();
});

а затем заново создайте.

$("#datagrid").dataTable();

Ответ 5

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

Ответ 6

Новый API Datatables имеет функцию перезагрузки, которая снова получит данные из источника ajax, не требуя, чтобы вы сначала уничтожили таблицу. Когда у меня есть таблица с большим количеством строк (5000+), уничтожение занимает больше времени, чем начальная загрузка, плюс поле "обработка" не появляется при уничтожении, но перезагрузка довольно быстро и корректно отображает "обработку" ", когда он работает.

Вот обновленная версия кода в вопросе, который использует новый API для достижения желаемого эффекта:

function getDate() {
  var date = $('input[name="myDate"]').val();
  return date;
}

$('#myDate').click(updateDate);

// Use .DataTable instead of .dataTable
// It returns a different object that has the ajax attribute on it.
var myDataTable = $('#dataTable').DataTable({
  "bServerSide": true,
  "sAjaxSource": "/Home/Ajax",
  "fnServerParams": function (aoData) {
    var date = getDate();
    aoData.push({ "name": "myDate", "value": date });
  },
  //... there more

function updateDate() { 
  myDataTable.ajax.reload();
}

Единственное изменение, которое я сделал, это использовать .DataTable вместо .DataTable и поддерживать ссылку на возвращаемое значение myDataTable, чтобы его можно было использовать для вызова .ajax.reload().

Ответ 7

Очистить существующую таблицу данных:

$(this).dataTable().fnClearTable();
$(this).dataTable().fnDestroy();

Ответ 8

var myDataTable = $('#dataTable').DataTable();
myDataTable.ajax.reload();

Абсолютно это то, что я ищу. Идеальное решение для повторной инициализации таблицы данных