JQuery DataTable не работает

Question

Я пытаюсь создать таблицу с DataTable библиотеки (что использование краеугольного zurb), Это таблица HTML код:

<table dir="rtl" id="example" class="display responsive nowrap" cellspacing="0" width="100%; " > 
      <thead style="margin-top:0%;"> 

      <tr class="top-table" > 
       <th><label class="tableHeaders">מספר</label></th> 
       <th><label class="tableHeaders"><fmt:message key="email" /></label></th> 
       <th><label class="tableHeaders"><fmt:message key="department1" /></label></th> 
       <th><label style="float:right;"><fmt:message key="role1" /></label></th> 
       <th></th> 


      </tr> 
      </thead> 
      <tbody> 
      <c:forEach items="${listAdmin_user}" var="Admin_user" varStatus="status"> 
       <tr> 
        <td>${status.index + 1}</td> 
        <td>${Admin_user.email}</td> 

        <td>${Admin_user.departmentObj.inCurrentLanguage}</td> 
        <td>${Admin_user.roleObj.inCurrentLanguage}</td> 
        <td> 
         <a href="editAdmin_user?id=${Admin_user.id}"><img src="resources/images/update.gif"></a> 
         &nbsp;&nbsp;&nbsp;&nbsp; 
         <a href="deleteAdmin_user?id=${Admin_user.id}"><img src="resources/images/erase.gif"></a> 
        </td> 

       </tr> 
      </c:forEach> 
       </tbody> 

      </table> 

также я добавил этот сценарий в моем HTML файл: (парафировать таблицу и добавить DataTable файлы, расположенные в моих папках проекта)

<script src="r/lib/foundation-sites/bower_components/jquery/dist/jquery.js"></script> 
    <script src="r/lib/foundation-sites/bower_components/foundation-sites/dist/foundation.js"></script> 
    <script src="r/lib/foundation-sites/bower_components/foundation-sites/dist/foundation.min.js"></script> 



<script src="resources/DataTables-1.10.12/DataTables-1.10.12/media/js/jquery.dataTables.min.js"></script> 
<script src="resources/Responsive-2.1.0/js/dataTables.responsive.min.js"></script> 

<script> 
     $(document).foundation(); 
     $(document).ready(function() { 

      var dataTable = $('#example').DataTable( 
     { 

      "language": { 
       "url": "resources/DataTables-1.10.12/DataTables-1.10.12/hebrew.json" 
      }, 
      "columnDefs": [ { 

      "targets": [5,6], 
      "orderable": false 
      }, 
      { responsivePriority: 1, targets: 0 }, 
      { responsivePriority: 2, targets: 1 }, 
      { responsivePriority: 3, targets: 5 }, 
      { responsivePriority: 4, targets: 6 } 
      ], 

      responsive: true, 

     } 

     ); 

     $("#searchbox").keyup(function() { 
      dataTable.fnFilter(this.value); 
     });  


     $("#searchbox").on("keyup search input paste cut", function() { 
      dataTable.search(this.value).draw(); 
     }); 
     }); 



    </script> 

(на конец страницы JSP).

Вот ссылки:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css"> 
    <link href="resources/cssf/addCss.css?version=6" rel="stylesheet" > 
    <link rel="stylesheet" href="resources/foundation-icons/foundation-icons.css" /> 
    <link rel="stylesheet" href="resources/DataTables-1.10.12/DataTables-1.10.12/media/css/dataTables.foundation.min.css"/> 
    <link rel="stylesheet" href="resources/DataTables-1.10.12/DataTables-1.10.12/media/css/jquery.dataTables.min.css"/> 
    <link rel="stylesheet" href="resources/Responsive-2.1.0/css/responsive.dataTables.min.css"/> 
    <link href="r/css/app.css" rel="stylesheet" > 

Моя проблема заключается в том, что DataTable не работает, я получаю ошибку на этой линии в JS-файла:

i._DT_CellIndex={row:b,column:l};g.push(i);if((!c||n.mRender||n.mData!==l)&&(!h.isPlainObject(n.mData)||n.mData._!==l+".display"))i.innerHTML=B(a,b,l,"display");n.sClass&&(i.className+=" "+n.sClass);n.bVisible&&!c?j.appendChild(i):!n.bVisible&&c&&i.parentNode.removeChild(i); 

Погрешность:

Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined 

Я также использую DataTable на других страницах и работает нормально, только на этой странице I получил эту ошибку. У кого-нибудь есть идеи о моей проблеме?

Answer 1

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

<script> 
     $(document).foundation(); 
     $(document).ready(function() { 

      var dataTable = $('#example').DataTable( 
     { 

      "language": { 
       "url": "resources/DataTables-1.10.12/DataTables-1.10.12/hebrew.json" 
      }, 
      "columnDefs": [ { 

       "targets": [2,3], 
      "orderable": false 
      }, 
      { responsivePriority: 1, targets: 0 }, 
      { responsivePriority: 2, targets: 1 }, 
      { responsivePriority: 3, targets: 2 }, 
      { responsivePriority: 4, targets: 3 } 
      ], 
      responsive: true, 
     }); 

     $("#searchbox").keyup(function() { 
      dataTable.fnFilter(this.value); 
     }); 
     $("#searchbox").on("keyup search input paste cut", function() { 
      dataTable.search(this.value).draw(); 
     }); 
     }); 

    </script>