Question

我正在尝试实现数据表，但它无法正常工作。使用我的google chrome调试器进行检查;它返回错误“无法读取属性'每个'null”。我一直在尝试调试此但是我没有通过。

这是对网站的引用，以查看示例http://www.datatables.net/release-datatables/examples/api/multi_filter.html

下面是代码：

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进行sortable，当我输入$（'＃example tfoot th'）到我的控制台时，它返回了一个数组： [ 名，位置，办公室，年龄，开始日期，薪水 ]

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

的行上。

但很抱歉我没有得到断点的一部分;因为我尝试的是添加“休息”;在行之后

Answer 1

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

$('#example tfoot th')

然后按Enter键。查看它的评估结果。如果它找不到任何元素，那就是你的问题。考虑到你提供的html，我怀疑这将是你的问题（除非你有一个更严重的问题与jQuery和它看起来）。

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

行放置一个断点

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

并刷新页面。一旦命中断点，请进入控制台：

table.columns()

并查看其评估结果。我的猜测是它将为空。

我没有看到你在哪里包括sortable.js。在您需要dataTables.min.js之后是否包含它？

DataTable显示“无法读取属性'每个'null”

1 个答案: