JQuery 数据表不工作

Question

我正在尝试使用 DataTable 库（使用 foundation-zurb）创建 table，这是 table 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 文件中：（初始化 table 并添加位于我的项目文件夹中的 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 并且它工作正常，只有在这个页面上我遇到了这个错误。有人知道我的问题吗？

Answer 1

header 列的数量不匹配导致了这个问题，header 列和行列的数量应该相等。请将您的脚本更改为适合您的以下脚本!!!

<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>

JQuery 数据表不工作

JQuery DataTable not working

javascript

datatable

jquery

zurb-foundation