Fatal编程技术网
  • javascript/
  • Javascript 数据表显示；无法读取属性'；每个'；“无效”的定义；

Javascript 数据表显示；无法读取属性'；每个'；“无效”的定义；

javascript

Javascript 数据表显示；无法读取属性'；每个'；“无效”的定义；,javascript,datatable,Javascript,Datatable,我一直在尝试实现数据表，但它不起作用；它返回的错误是“无法读取null的属性'each'。我一直在尝试调试它，但没有完成 这里是一个参考网站，看看例子 以下是代码： sortable.js $(document).ready(function() { // Setup - add a text input to each footer cell $('#example tfoot th').each( function () { var title = $('#e

我一直在尝试实现数据表，但它不起作用；它返回的错误是“无法读取null的属性'each'。我一直在尝试调试它，但没有完成

这里是一个参考网站，看看例子

以下是代码：

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();
        } );
    } );
} );

$（文档）.ready（函数（）{
//设置-向每个页脚单元格添加文本输入
$（'#示例tfoot th'）。每个（函数（）{
var title=$（'#示例thead th'）.eq（$（this.index（））.text（）；
$（this.html（“”）；
} );
//数据表
变量表=$（“#示例”）.DataTable（）；
//应用搜索
table.columns（）.eq（0）.each（函数（colIdx）{
$（'input'，table.column（colIdx）.footer（））.on（'keyup change'，function（）{
桌子
.列（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>


名称
位置
办公室
年龄
开始日期
薪水
名称
位置
办公室
年龄
开始日期
薪水
老虎尼克松
系统架构师
爱丁堡
61
2011/04/25
$320,800
加勒特温特斯
会计
东京
63
2011/07/25
$170,750
阿什顿考克斯
初级技术作者
旧金山
66
2009/01/12
$86,000
塞德里克·凯利
高级Javascript开发人员
爱丁堡
22
2012/03/29
$433,060
佐藤航空
会计
东京
33
2008/11/28
$162,700
布里尔·威廉姆森
集成专家
纽约
61
2012/12/02
$372,000
赫罗德·钱德勒
营业员
旧金山
59
2012/08/06
$137,500
罗娜·戴维森
集成专家
东京
55
2010/10/14
$327,900
科琳赫斯特
Javascript开发人员
旧金山
39
2009/09/15
$205,500
索尼娅·弗罗斯特
软件工程师
爱丁堡
23
2008/12/13
$103,600
杰娜·盖恩斯
办公室经理
伦敦
30
2008/12/19
$90,560
奎因·弗林
支撑导线
爱丁堡
22
2013/03/03
$342,000
查尔德·马歇尔
区域主任
旧金山
36
2008/10/16
$470,600
海莉·肯尼迪
高级市场设计师
伦敦
43
2012/12/18
$313,500
提前谢谢

实际上，我需要主文件中的可排序项，因为我使用的是laravel，当我在控制台中输入$（'example tfoot th'）时，它返回了以下数组： [ ​名称​​ , ​位置​​ , ​办公室​​ , ​年龄​​ , ​开始日期​​ , ​薪水​​ ]

但是在调试器上查看源文件时，我发现错误显示在“table.columns（）.eq（0）.each（function（colIdx）”的行中

但很抱歉，我没有得到断点的部分；因为我尝试的是在该行之后添加“break；”

在Chrome的Web开发者工具中打开页面并转到控制台（或只需按esc键）。输入：

然后按enter键。查看它的计算结果。如果它找不到任何元素，那就是您的问题。考虑到您提供的html，我怀疑这将是您的问题（除非您在jQuery及其外观方面有更严重的问题）

因此，问题应该在第二个.each（）上。转到Web Developer Tools中的源代码，打开sortable.js文件，并在

table.columns().eq( 0 ).each( function ( colIdx )
并刷新页面。一旦达到断点，请在控制台中输入：

table.columns()
看看它的计算结果。我猜它将是空的

我看不出您在哪里包含了sortable.js。您是在需要dataTables.min.js之后才包含它的吗？

在调试器中检查我的源代码，它位于表的行上。columns（）.eq（0）。each（函数（colIdx）它抛出了错误。谢谢已经解决了问题！！这是我给我的sripts@AlofeOluwafemi解决办法是什么？ 
table.columns()