Jquery Datatable：jquery.dataTables.min.jsにfが定義されていません

Question

Jquery Datatablesを使用しています。私はコンソールエラーが定義されていないfを取得しています。 私はDatatablesでajaxリクエストを使用しません。以下は

私の表です：

以下

<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のコードです：

以下

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

は、コンソールのエラーです：

TypeError例外：fが 定義されていない[詳細] 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.dataTables.min.js:92:342各 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:289http://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:7http://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

yup - これは、DataTablesがテーブル構造に不一致があることを伝える方法です。最も可能性の高い解決策は、お客様の<th>行がお客様の<td>行と一致するようにすることです。

last_nameがDataTables検索ボックスに含まれていないことに気付いたとき、私はこの最後の夜に遭遇しました。 DataTablesは、最終的にレンダリングされるものではなく、列定義で指定されたフィールド名を検索します。だから私は見えるようにlast_name列を追加しました：それはヘッダーが必要ではないと考えてfalse。同じスタイルのエラーメッセージを見て、最後に戻ってヘッダー行=問題解決に追加しなければなりませんでした。

var columns = [ 

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