web-dev-qa-db-ja.com

Uncaught TypeError：undefinedのプロパティ 'mData'を読み取れません

私は従った this DataTablesプラグインを使用して（同じページ上の）複数のテーブルを有効にするため。手動のテーブルでは機能しますが、動的に作成されたテーブルでは次のエラーが表示されます。

Uncaught TypeError：undefinedのプロパティ 'mData'を読み取れません

私のページsrcipt：

 $(document).ready(function() {
         $('table.datatable').dataTable( {
            'bSort': false,
            'aoColumns': [
                  { sWidth: "45%", bSearchable: false, bSortable: false },
                  { sWidth: "45%", bSearchable: false, bSortable: false },
                  { sWidth: "10%", bSearchable: false, bSortable: false }
            ],
            "scrollY":        "200px",
            "scrollCollapse": false,
            "info":           true,
            "paging":         true
        } );
    } );

私のHTML最初のテーブル：

<table class="table table-striped table-bordered datatable">
    <thead>
        <tr>
            <th>  Issue      </th>
            <th>  Product      </th>
            <th>  Qty      </th>
            <th class="text-right"> Paid    </th>
            <th class="text-right"> Balance    </th>
            <th class="text-right"> Total    </th>
        </tr>   
    </thead><!-- table head -->
    <tbody>
        <tr>
            <td>May 20, 2015</a></td>
            <td>Normal Sim</td>
            <td>1000</td>
            <td><span class="pull-right">Rs18,893.00 </span></td>
            <td><span class="pull-right">Rs131,107.00 </span></td>
            <td><span class="pull-right">Rs150,000.00 </span></td>
        </tr>
        <tr>
            <td>voice/7?invoice_type=1">May 20, 2015</a></td>
            <td>Nokia 3310 </td>
            <td>10000</td>
            <td><span class="pull-right">Rs2,520,000.00 </span></td>
            <td><span class="pull-right">Rs12,480,000.00 </span></td>
            <td><span class="pull-right">Rs15,000,000.00 </span></td>
        </tr>
        <tr>
            <td>May 20, 2015</a></td>
            <td>Nokia 3310 </td>
            <td>1000</td>
            <td><span class="pull-right">Rs404,000.00 </span></td>
            <td><span class="pull-right">Rs1,096,000.00 </span></td>
            <td><span class="pull-right">Rs1,500,000.00 </span></td>
        </tr>
    </tbody>
</table>

2番目のテーブル：

<table class="table table-striped table-bordered datatable" id="p_history">
    <thead>
        <tr>
            <th>Issue</th>
            <th>Paid</th>
            <th>Comments</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>May 20, 2015, 5:15 pm</td>
            <td>Rs 15,000.00 </td>
            <td></td>
        </tr>
        <tr>
            <td>May 20, 2015, 5:15 pm</td>
            <td>Rs 12.00 </td>
            <td></td>
        </tr>
        <tr>
            <td>May 20, 2015, 5:15 pm</td>
            <td>Rs 123.00 </td>
            <td></td>
        </tr>
        <tr>
            <td>May 20, 2015, 5:15 pm</td>
            <td>Rs 123.00 </td>
            <td></td>
        </tr>
    </tbody>
</table>

修正する方法はありますか？

注：私も読みます this 未回答の質問、同じエラーですが、私の基準は異なるため、重複ではありません。

javascriptphpjqueryjquery-datatables
6
Abdul Manan

原因

同じオプションで複数のテーブルを初期化しようとしています。最も重要なのは、aoColumnsで、列の定義を保持する配列です。 aoColumns配列は3つのアイテムのみを保持しますが、列の数は各テーブルで異なるため、エラーが発生します。

manual から：

aoColumns：指定する場合、この配列の長さは元のHTMLテーブルの列数と等しくなければなりません。デフォルト値と自動的に検出されたオプションのみを使用する場合は、「null」を使用します。

解決

以下に示すように、一意のidを最初のテーブルに割り当て、各テーブルを個別に初期化する必要があります。

$(document).ready(function() {
   $('#table_first').dataTable( {
       'bSort': false,
       'aoColumns': [
             { sWidth: "15%", bSearchable: false, bSortable: false },
             { sWidth: "15%", bSearchable: false, bSortable: false },
             { sWidth: "15%", bSearchable: false, bSortable: false },
             { sWidth: "15%", bSearchable: false, bSortable: false },
             { sWidth: "15%", bSearchable: false, bSortable: false },
             { sWidth: "15%", bSearchable: false, bSortable: false },
       ],
       "scrollY":        "200px",
       "scrollCollapse": false,
       "info":           true,
       "paging":         true
   });

    $('#p_history').dataTable( {
       'bSort': false,
       'aoColumns': [
             { sWidth: "45%", bSearchable: false, bSortable: false },
             { sWidth: "45%", bSearchable: false, bSortable: false },
             { sWidth: "10%", bSearchable: false, bSortable: false }
       ],
       "scrollY":        "200px",
       "scrollCollapse": false,
       "info":           true,
       "paging":         true
   } );

} );
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.css" rel="stylesheet"/>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>

<table class="table table-striped table-bordered datatable" id="table_first">
    <thead>
        <tr>
            <th>  Issue      </th>
            <th>  Product      </th>
            <th>  Qty      </th>
            <th class="text-right"> Paid    </th>
            <th class="text-right"> Balance    </th>
            <th class="text-right"> Total    </th>
        </tr>   
    </thead><!-- table head -->
    <tbody>
        <tr>
            <td>May 20, 2015</a></td>
            <td>Normal Sim</td>
            <td>1000</td>
            <td><span class="pull-right">Rs18,893.00 </span></td>
            <td><span class="pull-right">Rs131,107.00 </span></td>
            <td><span class="pull-right">Rs150,000.00 </span></td>
        </tr>
        <tr>
            <td>voice/7?invoice_type=1">May 20, 2015</a></td>
            <td>Nokia 3310 </td>
            <td>10000</td>
            <td><span class="pull-right">Rs2,520,000.00 </span></td>
            <td><span class="pull-right">Rs12,480,000.00 </span></td>
            <td><span class="pull-right">Rs15,000,000.00 </span></td>
        </tr>
        <tr>
            <td>May 20, 2015</a></td>
            <td>Nokia 3310 </td>
            <td>1000</td>
            <td><span class="pull-right">Rs404,000.00 </span></td>
            <td><span class="pull-right">Rs1,096,000.00 </span></td>
            <td><span class="pull-right">Rs1,500,000.00 </span></td>
        </tr>
    </tbody>
</table>

<table class="table table-striped table-bordered datatable" id="p_history">
    <thead>
        <tr>
            <th>Issue</th>
            <th>Paid</th>
            <th>Comments</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>May 20, 2015, 5:15 pm</td>
            <td>Rs 15,000.00 </td>
            <td></td>
        </tr>
        <tr>
            <td>May 20, 2015, 5:15 pm</td>
            <td>Rs 12.00 </td>
            <td></td>
        </tr>
        <tr>
            <td>May 20, 2015, 5:15 pm</td>
            <td>Rs 123.00 </td>
            <td></td>
        </tr>
        <tr>
            <td>May 20, 2015, 5:15 pm</td>
            <td>Rs 123.00 </td>
            <td></td>
        </tr>
    </tbody>
</table>

リンク

このエラーやその他の一般的なコンソールエラーの詳細については、 jQuery DataTables：一般的なJavaScriptコンソールエラー を参照してください。

14
Gyrocode.com

DataTables 使用ガイド で述べたように、プラグインを正しく動作させるには、テーブルでtheadセクションとtbodyセクションの両方を宣言する必要があります。

このことについても議論されています ここではSO 前に、グーグルやSO検索は次回は良いことかもしれません。

9
budwiser

AaDataが配列の配列、たとえば[["col11","col12","col13"],["col21","col22","col23"]]の場合、上記のコードのみが機能し、それ以外の場合はmdata属性がaaData=[{col1:"col1val",col2:"col2val",col3:"col3val"}]などのcol値に設定されることを期待します。

AoColumnsをマップする-aoColumns：[{mdata:"col1"}]

これを行う -

$(document).ready(function() {
         $('#p_history').dataTable( {
            'bSort': false,
            'aoColumns': [
                  { sWidth: "45%", bSearchable: false, bSortable: false },
                  { sWidth: "45%", bSearchable: false, bSortable: false },
                  { sWidth: "10%", bSearchable: false, bSortable: false },
                  //match the number of columns here for table1
            ],
            "scrollY":        "200px",
            "scrollCollapse": false,
            "info":           true,
            "paging":         true
        } );


//Now for another table
         $('#secondTableId').dataTable( {
            'bSort': false,
            'aoColumns': [
                  { sWidth: "45%", bSearchable: false, bSortable: false },
                  { sWidth: "45%", bSearchable: false, bSortable: false },
                  { sWidth: "10%", bSearchable: false, bSortable: false },
                  //match the number of columns here for table2
            ],
            "scrollY":        "200px",
            "scrollCollapse": false,
            "info":           true,
            "paging":         true
        } );
    } );
2
Waqar

idk_something_1のような名前を使用しているときにこのエラーが発生しました。私はそれをksomething1に「名前を変更」することで解決しました。

0
PJunior