我一直在尝试实现数据表，但它不起作用。用我的谷歌浏览器调试器检查；它返回错误“无法读取 null 的属性'each'”。我一直在尝试调试它，但我没能通过。
这里有一个引用网站，看例子http://www.datatables.net/release-datatables/examples/api/multi_filter.html
下面是代码:
可排序.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，当我在控制台中输入 $('#example tfoot th') 时，它返回了一个数组: [ 姓名 , 职位 , 办公室 , 年龄 , 开始日期 , 薪资 ]
但是查看调试器上的源文件，我发现错误显示在我有“table.columns().eq( 0 ).each( function ( colIdx )”的行上。
但是很抱歉我不明白断点的部分；因为我尝试的是添加“break;”行后
最佳答案
在 Chrome 的 Web 开发人员工具中打开页面并转到控制台(或只需按 esc)。输入:
$('#example tfoot th')
然后按 Enter 键。看看它的评估结果是什么。如果找不到任何元素，那就是你的问题了。考虑到您提供的 html，我怀疑这将是您的问题(除非您对 jQuery 及其外观有更严重的问题)。
因此，问题应该出在第二个.each()上。转到 Web 开发工具中的源代码，打开 sortable.js 文件并在带有
的行上放置一个断点table.columns().eq( 0 ).each( function ( colIdx )
并刷新页面。命中断点后，在控制台中输入:
table.columns()
看看它的评估结果是什么。我的猜测是它将为空。
我没有看到你在哪里包含了 sortable.js。您在需要 dataTables.min.js 之后包含它吗？
关于javascript - 数据表显示 "Cannot read property ' 每个为空”，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26066402/