Предупреждение Datatables (таблица id = 'example'): не может повторно инициализировать таблицу данных

Ответ 1

Вы дважды инициализируете данные, почему?

// Take this off
/*
$(document).ready(function() {
    $( '#example' ).dataTable();
} );
*/
$(document).ready( function() {
  $( '#example' ).dataTable( {
   "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
     // Bold the grade for all 'A' grade browsers
     if ( aData[4] == "A" )
     {
       $('td:eq(4)', nRow).html( '<b>A</b>' );
     }
   }
 } );
 } );

Ответ 2

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

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

Источник: iodocs.com

или Удалить первый:

$(document).ready(function() {
    $('#example').dataTable();
} );

В вашем случае это лучший вариант vjk.

Ответ 3

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

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

Ответ 4

$('#example').dataTable();

Сделайте это классом, чтобы вы могли создавать несколько таблиц за раз

$('.example').dataTable();

Ответ 5

Эта проблема возникает, если мы инициализируем dataTable более одного раза. Затем нам нужно удалить предыдущий.

С другой стороны, мы можем уничтожить старый datatable таким образом и перед созданием нового datatable используйте следующий код:

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

Существует еще один сценарий, скажем, вы отправляете более одного запроса ajax, ответ которого будет иметь доступ к одной и той же таблице в одном шаблоне, тогда мы также получим ошибку. В этом случае метод fnDestroy не работает должным образом, потому что вы не знаете, какой ответ приходит первым или позже. Затем вы должны установить bRetrieve TRUE в конфигурации таблицы данных. Это его.

Это мой сенарио:

<script type="text/javascript">

$(document).ready(function () {

        $('#DatatableNone').dataTable({
            "bDestroy": true
        }).fnDestroy();

        $('#DatatableOne').dataTable({
            "aoColumnDefs": [{
                "bSortable": false,
                "aTargets": ["sorting_disabled"]
            }],
            "bDestroy": true
        }).fnDestroy();

});

</script>

Ответ 6

Вы можете добавить destroy:true в конфигурацию, чтобы убедиться, что уже существующая таблица данных удалена перед повторной инициализацией.

$('#example').dataTable({
    destroy: true,
    ...
});

Ответ 7

Удалить первое:

$(document).ready(function() {
    $('#example').dataTable();
} );

Ответ 8

Добавьте "bDestroy": true в вашей таблице данных. Как: -

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

Будет работать.

Ответ 9

Ищите длинную строку в коде, где вы сначала создаете таблицу, которая выглядит как

jQuery(document).ready(function() {
    jQuery("#example").dataTable({"bLengthChange":true,"bPaginate":true, "bJQueryUI":true}).rowGrouping({bExpandableGrouping:true, bExpandSingleGroup:false, iExpandGroupOffset:-1, asExpandedGroups:[""]});
    GridRowCount();
    ResetSearchField();
}); 

затем добавьте следующую строку в следующую строку, чтобы изменить параметры в поле выбора

"aLengthMenu": [[60, 120, 240, -1], [20, 40, 80, "All"]] 

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

"iDisplayLength": 60

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

jQuery(document).ready(function() {
            jQuery("#example").dataTable({"iDisplayLength": 60, "aLengthMenu": [[60, 120, 240, -1], [20, 40, 80, "All"]], "bLengthChange":true, "bPaginate":true, "bJQueryUI":true}).rowGrouping({bExpandableGrouping:true, bExpandSingleGroup:false, iExpandGroupOffset:-1, asExpandedGroups:[""]});
            GridRowCount();
            ResetSearchField();
        }); 

Ответ 10

В моем случае

С

<table id="example" class="display compact table-hover" cellspacing="0" >

Для

<table id="example" class="table table-condensed table-hover" cellspacing="0" >

Решила мою проблему