Jquery Datatable : f가 jquery.dataTables.min.js에 정의되지 않았습니다.

Question

Jquery Datatables를 사용하고 있습니다. 콘솔 오류가 정의되지 않았습니다. Datatables에서 아약스 요청을 사용하지 않습니다.

다음

<table id="myTable" class="table table-striped table-bordered dataTable" > 

    <thead> 
     <tr> 
     <th>Trip ID</th> 
     <th>User Name</th> 
     <th>From</th> 
     <th>To</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr><td>123231</td></tr> 
    <tr><td>John</td></tr> 
    <tr><td>dfshggsf</td></tr> 
    <tr><td>dsfgfsgfsg</td></tr> 
    </tbody> 
    <tfoot> 
     <tr> 
      <th>Trip ID</th> 
      <th>User Name</th> 
      <th>From</th> 
      <th>To</th>  
     </tr> 
    </tfoot> 
     </table>  
</table> 

가 JQuery와 코드입니다 :

형식 오류 : f는 정의되지 [자세히 알아보기] 다음

$(document).ready(function(){ 
     $('#myTable').DataTable({ 

      'ordering':false, 
      dom: 'Bfrtip', 

      buttons:[ 
       { 
        extend: 'excelHtml5', 
        title: 'Data export' 
       }, 
       { 
        extend: 'pdfHtml5', 
        title: 'Data export' 
       }, 
        { 
        extend: 'csvHtml5', 
        title: 'Data export' 
       }, 
        { 
        extend: 'print', 
        title: 'Data export' 
       } 
      ] 
     }); 
    }); 

콘솔 오류가 아래

내 표입니다 jquery.dataTables.min.js : 27 : 64 jb http://localhost:8080/RajaRathaDashBoardApp/resources/js/jquery.dataTables.min.js:27:64,GA http://localhost:8080/RajaRathaDashBoardApp/resources/js/jquery.dataTables.min.js:48:224 E http://localhost:8080/RajaRathaDashBoardApp/resources/js/jquery.dataTables.min.js:92:256 m/각 http://localhost:8080/RajaRathaDashBoardApp/resources/js/jquery-1.12.4.js:370:10 각 http://localhost:8080/RajaRathaDashBoardApp/resources/js/jquery-1.12.4.js:137:10 m http://localhost:8080/RajaRathaDashBoardApp/resources/js/jquery.dataTables.min.js:82:457 h.fn.DataTable http://localhost:8080/RajaRathaDashBoardApp/resources/js/jquery.dataTables.min.js:164:289 http://localhost:8080/RajaRathaDashBoardApp/RajarathaTripHistory:38:4 화재 http://localhost:8080/RajaRathaDashBoardApp/resources/js/jquery-1.12.4.js:3232:11 fireWith http://localhost:8080/RajaRathaDashBoardApp/resources/js/jquery-1.12.4.js:3362:7,174 < http://localhost:8080/RajaRathaDashBoardApp/resources/js/jquery.dataTables.min.js:92:342 준비 http://localhost:8080/RajaRathaDashBoardApp/resources/js/jquery-1.12.4.js:3582:3 는 http://localhost:8080/RajaRathaDashBoardApp/resources/js/jquery-1.12.4.js:3617:3

내가이 문제를 해결 도와주세요 ... 어떤 도움을 이해할 수있을 것이다 을 완료했다.

Answer 1

tbody 섹션에 잘못된 테이블 구조가 있습니다.

수정 된 테이블 구조는 다음과 같습니다.

<tbody> 
    <tr> 
     <td>123231</td> 
     <td>John</td> 
     <td>dfshggsf</td> 
     <td>dsfgfsgfsg</td> 
    </tr> 
</tbody> 

코드 및 데모는 this example을 참조하십시오.

Answer 2

예 - DataTables가 테이블 구조에 불일치가 있음을 알려주는 방법입니다. 가장 가능성있는 해결책은 <th> 행이 <td> 행과 일치하는지 확인하는 것입니다.

지난 밤에 나는 last_name이 DataTables 검색 상자에 포함되어 있지 않은 것으로 나타났습니다. DataTables는 궁극적으로 렌더링되는 것이 아니라 열 정의에 제공된 필드 이름을 검색합니다. last_name 열을 표시로 추가 했으므로 헤더가 필요 없다고 생각합니다. 동일한 스타일의 오류 메시지를보고 머리글 행 = 문제 해결에 마지막으로 추가해야했습니다.

var columns = [ 

    { data: "first_name", 
    render: function(data, type, row) { 
     return row.first_name + " " + row.last_name; 
    } 
    }, 
    { data: "last_name", 
    visible: false 
    }, 
... 
]