DataTable顯示「無法讀取屬性'null'

我試圖實現數據表，但它不工作。檢查我的谷歌Chrome調試器;它返回錯誤，」無法讀取屬性'每個'null 「。我一直在試圖調試這個，但沒有通過。DataTable顯示「無法讀取屬性'null'

這裏是對網站的引用，看到的例子

下面這裏是代碼：

sortable.js

$(document).ready(function() { 
    // Setup - add a text input to each footer cell 
    $('#example tfoot th').each(function() { 
     var title = $('#example thead th').eq($(this).index()).text(); 
     $(this).html('<input type="text" placeholder="Search '+title+'" />'); 
    }); 

    // DataTable 
    var table = $('#example').DataTable(); 

    // Apply the search 
    table.columns().eq(0).each(function (colIdx) { 
     $('input', table.column(colIdx).footer()).on('keyup change', function() { 
      table 
       .column(colIdx) 
       .search(this.value) 
       .draw(); 
     }); 
    }); 
});

的index.html

<html> 
<head> 
<!--INCLUDE JQUERY--> 
<script type="text/javascript" src="{{JS('jquery-1.11.0.min.js')}}"></script> 
<!--INCLUDE DATAtABLE JQUERY RESOURCE-->  
<script type="text/javascript" src="{{JS('jquery.dataTables.min.js')}}"></script> 
</head> 
<body> 
<table id="example" class="display" cellspacing="0" width="100%"> 
     <thead> 
      <tr> 
       <th>Name</th> 
       <th>Position</th> 
       <th>Office</th> 
       <th>Age</th> 
       <th>Start date</th> 
       <th>Salary</th> 
      </tr> 
     </thead> 

     <tfoot> 
      <tr> 
       <th>Name</th> 
       <th>Position</th> 
       <th>Office</th> 
       <th>Age</th> 
       <th>Start date</th> 
       <th>Salary</th> 
      </tr> 
     </tfoot> 

     <tbody> 
      <tr> 
       <td>Tiger Nixon</td> 
       <td>System Architect</td> 
       <td>Edinburgh</td> 
       <td>61</td> 
       <td>2011/04/25</td> 
       <td>$320,800</td> 
      </tr> 
      <tr> 
       <td>Garrett Winters</td> 
       <td>Accountant</td> 
       <td>Tokyo</td> 
       <td>63</td> 
       <td>2011/07/25</td> 
       <td>$170,750</td> 
      </tr> 
      <tr> 
       <td>Ashton Cox</td> 
       <td>Junior Technical Author</td> 
       <td>San Francisco</td> 
       <td>66</td> 
       <td>2009/01/12</td> 
       <td>$86,000</td> 
      </tr> 
      <tr> 
       <td>Cedric Kelly</td> 
       <td>Senior Javascript Developer</td> 
       <td>Edinburgh</td> 
       <td>22</td> 
       <td>2012/03/29</td> 
       <td>$433,060</td> 
      </tr> 
      <tr> 
       <td>Airi Satou</td> 
       <td>Accountant</td> 
       <td>Tokyo</td> 
       <td>33</td> 
       <td>2008/11/28</td> 
       <td>$162,700</td> 
      </tr> 
      <tr> 
       <td>Brielle Williamson</td> 
       <td>Integration Specialist</td> 
       <td>New York</td> 
       <td>61</td> 
       <td>2012/12/02</td> 
       <td>$372,000</td> 
      </tr> 
      <tr> 
       <td>Herrod Chandler</td> 
       <td>Sales Assistant</td> 
       <td>San Francisco</td> 
       <td>59</td> 
       <td>2012/08/06</td> 
       <td>$137,500</td> 
      </tr> 
      <tr> 
       <td>Rhona Davidson</td> 
       <td>Integration Specialist</td> 
       <td>Tokyo</td> 
       <td>55</td> 
       <td>2010/10/14</td> 
       <td>$327,900</td> 
      </tr> 
      <tr> 
       <td>Colleen Hurst</td> 
       <td>Javascript Developer</td> 
       <td>San Francisco</td> 
       <td>39</td> 
       <td>2009/09/15</td> 
       <td>$205,500</td> 
      </tr> 
      <tr> 
       <td>Sonya Frost</td> 
       <td>Software Engineer</td> 
       <td>Edinburgh</td> 
       <td>23</td> 
       <td>2008/12/13</td> 
       <td>$103,600</td> 
      </tr> 
      <tr> 
       <td>Jena Gaines</td> 
       <td>Office Manager</td> 
       <td>London</td> 
       <td>30</td> 
       <td>2008/12/19</td> 
       <td>$90,560</td> 
      </tr> 
      <tr> 
       <td>Quinn Flynn</td> 
       <td>Support Lead</td> 
       <td>Edinburgh</td> 
       <td>22</td> 
       <td>2013/03/03</td> 
       <td>$342,000</td> 
      </tr> 
      <tr> 
       <td>Charde Marshall</td> 
       <td>Regional Director</td> 
       <td>San Francisco</td> 
       <td>36</td> 
       <td>2008/10/16</td> 
       <td>$470,600</td> 
      </tr> 
      <tr> 
       <td>Haley Kennedy</td> 
       <td>Senior Marketing Designer</td> 
       <td>London</td> 
       <td>43</td> 
       <td>2012/12/18</td> 
       <td>$313,500</td> 
      </tr> 
</tbody> 
    </table> 
</body> 
</html>

感謝提前

其實我需要在我的主文件怎麼把排序現在用laravel，當我做輸入$（「＃例如TFOOT日」）爲我的控制檯，它返回的這個數組： [ 名稱，位置，辦公室，年齡，開始日期，工資 ]

但看着調試器上的源文件我發現錯誤顯示在我有「table.colu」的行上mns（）。eq（0）.each（function（colIdx））「。

但是對不起，我沒有得到斷點的一部分;因爲我試圖增加「休息」;在線後

來源

2014-09-26 Alofe Oluwafemi

在Chrome的Web開發者工具中打開頁面並轉到控制檯（或者直接按Esc鍵）。輸入：

$('#example tfoot th')

並按回車。看看它評估的是什麼。如果找不到任何元素，那就是你的問題。考慮到你提供的HTML，我懷疑這將是你的問題（除非你有一個更嚴重的問題，與jQuery和它看起來）。

因此，問題應該在第二個.each（）。在Web Developer Tools中找到源代碼，打開sortable.js文件，並在上面放置一個斷點

table.columns().eq(0).each(function (colIdx)

並刷新頁面。一旦命中了斷點，請輸入控制檯：

table.columns()

並查看它的評估結果。我的猜測是它將是空的。

我看不到你包含sortable.js的地方。請求dataTables.min.js後是否包含它？

來源

2014-09-26 19:02:57

在調試器中檢查我的源碼在它的行table.columns（）。eq（0）.each（function（colIdx）它拋出錯誤 – 2014-09-26 19:21:53

謝謝解決了這個問題已經!!我打電話給我的s 012 – 2014-09-26 19:43:43

@AlofeOluwafemi解決方案是什麼？ – Sauron 2014-11-03 23:53:13

DataTable顯示「無法讀取屬性'null'

回答

相關問題