DataTable "null 각각의 속성을 읽을 수 없습니다"

데이터 표를 구현하려고했지만 작동하지 않습니다. Google 크롬 디버거를 사용하여 검사하면 "각각의 속성을 읽을 수 없음"오류가 반환됩니다. ". 나는 이것을 디버깅하려고 노력했지만 그것을 끝내지는 못했다. 여기 DataTable "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을 사용하고 있습니다. 내 콘솔에 $ ('# example tfoot th')를 입력하면 다음 배열을 반환했습니다. [ 이름 , 위치 , 사무실 , 나이 , 시작 날짜 , 급여 ] 디버거에서 소스 파일을보고

하지만 난 오류가 내가 어디에있는 줄에 표시 발견 "table.colu mns(). eq (0) .each (function (colIdx) ").

하지만 유감스럽게도 나는 중단 점의 일부를 얻지 못한다. 사촌 내가 뭘하려고하면 "휴식을 추가하는 것입니다;" 라인 뒤

출처

2014-09-26 Alofe Oluwafemi

Chrome의 웹 개발자 도구에서 페이지를 열고 콘솔로 이동하거나 esc를 누릅니다. 입력 :

$('#example tfoot th')

Enter 키를 누릅니다. 평가 대상을 확인하십시오. 어떤 요소도 찾을 수 없다면 문제가 있습니다. 당신이 제공 한 html을 고려할 때, 나는 이것이 당신의 문제가 될지 의심 스럽다. (당신이 jQuery에 더 심각한 문제가없고 그것이 보이는 곳을 제외하고).

따라서이 문제는 두 번째 .each()에 있어야합니다. 웹 개발자 도구의 소스로 이동하여 sortable.js 파일을 열고

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

으로 중단 점을 지정하고 페이지를 새로 고칩니다. 중단 점에 도달하면 콘솔에 다음을 입력하십시오.

table.columns()

그리고 평가할 부분을 확인하십시오. 내 추측으로는 null이 될 것입니다.

sortable.js가 포함 된 곳이 표시되지 않습니다. dataTables.min.js를 요구 한 후에 포함 시켰습니까?

출처

2014-09-26 19:02:57

내 소스를 디버거에서 table.columns(). eq (0) .each (function (colIdx)) 오류가 발생했습니다. –

감사합니다. 문제가 이미 해결되었습니다 !!. 내 말투로 전화하는거야 –

@AlofeOluwafemi 해결책은 무엇입니까? – Sauron

DataTable "null 각각의 속성을 읽을 수 없습니다"

답변

관련 문제