Исключение jQuery.Deferred: Невозможно установить свойство '_DT_CellIndex' из неопределенного TypeError: Невозможно установить свойство '_DT_CellIndex' из неопределенного

Question

Я получил эту ошибку в datatable.Я правильно включил все заголовочные файлы, но не знаю, почему возникает эта ошибка.

Исключение jQuery.Deferred: Невозможно установить свойство '_DT_CellIndex' с неопределенным TypeError: Невозможно установить свойство '_DT_CellIndex' с неопределенным

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

<div class="row">
   <div class="col-md-12">
      <table class="table table-striped table-hover datatable">
         <thead>
            <tr>
               <th>Target</th>
               <th>Goal</th>
               <th>Target Status</th> 
               <th>Date</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Demo Target</td>
               <td>Some Goal</td>
               <td>Some Status</td>
               <td>Some Date</td>
            </tr>
         </tbody>
      </table>
   </div>
</div>

Вот мой код JS-

   $(document).ready(function(){
   $.extend( $.fn.dataTable.defaults, {
       autoWidth: false,
       dom: '<"datatable-header"fBl><"datatable-scroll-wrap"t><"datatable-footer"ip>',
       language: {
           search: '<span>Filter:</span> _INPUT_', 
           searchPlaceholder: 'Search...',
           lengthMenu: '<span>Show:</span> _MENU_',
           paginate: { 'first': 'First', 'last': 'Last', 'next': $('html').attr('dir') == 'rtl' ? '&larr;' : '&rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr;' : '&larr;' }
       }
   });

   var table = $('.datatable').DataTable({
       buttons: {            
           buttons: [
               {
                   extend: 'copyHtml5',
                   className: 'btn btn-light',
                   exportOptions: {
                       columns: [ 0, ":visible" ]
                   }
               },
               {
                   extend: 'excelHtml5',
                   className: 'btn btn-light',
                   exportOptions: {
                       columns: [ 0, ":visible" ]
                   }
               },
               {
                   extend: 'pdfHtml5',
                   className: 'btn btn-light',
                   exportOptions: {
                       columns: [ 0, ":visible" ]
                   }
               },
               {
                   extend: 'colvis',
                   text: '<i class="icon-three-bars"></i>',
                   className: 'btn bg-blue btn-icon dropdown-toggle'
               }
           ]
       },
       "aaSorting": []
   });

Answer 1

Я не вижу проблем с вашим кодом, он отлично работает с моей стороны.Я бы проверил ваш html на наличие дубликатов, т. Е. Используя класс .datatable в другом месте, и использовал бы идентификатор для его инициации.