こんにちは、mysqlクエリ結果データを使用してデータを入力しているテーブルでデータテーブルプラグインを使用しようとしていますが、次のエラーが発生しています。
Uncaught TypeError: Cannot read property 'asSorting' of undefined
以下のコードを確認してください。
<link rel="stylesheet" type="text/css" href="css/demo_page.css">
<link rel="stylesheet" type="text/css" href="css/demo_table.css">
<table class="table table-striped well dataTable" id="courseslist">
<tbody><tr>
<th>Course ID</th>
<th>Course Title</th>
<th>Course Desc</th>
<th>Course Year</th>
<th>Course Start Date</th>
<th>Course End Date</th>
<th></th>
<th></th>
</tr>
<tr>
<td>63495</td>
<td>Course C</td>
<td>Course C</td>
<td>2013</td>
<td>14-Oct-2013</td>
<td>18-Oct-2013</td>
<td><a data-toggle="modal" data-courseid="63495" data-coursetitle="Course C" data-coursedesc="Course C" data-year="2013" data-startdate="2013-10-14" data-enddate="2013-10-18" href="#editcoursemodal" id="editcoursebutton" class="btn btn-warning"><i class="icon-white icon-pencil"></i> Edit</a></td>
<td><a data-toggle="modal" data-courseid="63495" href="#deletecoursemodal" id="deletecoursebutton" class="btn btn-danger"><i class="icon-white icon-remove"></i> Delete</a></td>
</tr>
<tr>
<td>66247</td>
<td>Course A</td>
<td>Course A</td>
<td>2013</td>
<td>30-Sep-2013</td>
<td>04-Oct-2013</td>
<td><a data-toggle="modal" data-courseid="66247" data-coursetitle="Course A" data-coursedesc="Course A" data-year="2013" data-startdate="2013-09-30" data-enddate="2013-10-04" href="#editcoursemodal" id="editcoursebutton" class="btn btn-warning"><i class="icon-white icon-pencil"></i> Edit</a></td>
<td><a data-toggle="modal" data-courseid="66247" href="#deletecoursemodal" id="deletecoursebutton" class="btn btn-danger"><i class="icon-white icon-remove"></i> Delete</a></td>
</tr>
<tr>
<td>86714</td>
<td>Course E</td>
<td>Course E</td>
<td>2013</td>
<td>28-Oct-2013</td>
<td>01-Nov-2013</td>
<td><a data-toggle="modal" data-courseid="86714" data-coursetitle="Course E" data-coursedesc="Course E" data-year="2013" data-startdate="2013-10-28" data-enddate="2013-11-01" href="#editcoursemodal" id="editcoursebutton" class="btn btn-warning"><i class="icon-white icon-pencil"></i> Edit</a></td>
<td><a data-toggle="modal" data-courseid="86714" href="#deletecoursemodal" id="deletecoursebutton" class="btn btn-danger"><i class="icon-white icon-remove"></i> Delete</a></td>
</tr>
<tr>
<td>90013</td>
<td>Course B</td>
<td>Course B</td>
<td>2013</td>
<td>07-Oct-2013</td>
<td>11-Oct-2013</td>
<td><a data-toggle="modal" data-courseid="90013" data-coursetitle="Course B" data-coursedesc="Course B" data-year="2013" data-startdate="2013-10-07" data-enddate="2013-10-11" href="#editcoursemodal" id="editcoursebutton" class="btn btn-warning"><i class="icon-white icon-pencil"></i> Edit</a></td>
<td><a data-toggle="modal" data-courseid="90013" href="#deletecoursemodal" id="deletecoursebutton" class="btn btn-danger"><i class="icon-white icon-remove"></i> Delete</a></td>
</tr>
<tr>
<td>96599</td>
<td>Course D</td>
<td>Course D</td>
<td>2013</td>
<td>21-Oct-2013</td>
<td>25-Oct-2013</td>
<td><a data-toggle="modal" data-courseid="96599" data-coursetitle="Course D" data-coursedesc="Course D" data-year="2013" data-startdate="2013-10-21" data-enddate="2013-10-25" href="#editcoursemodal" id="editcoursebutton" class="btn btn-warning"><i class="icon-white icon-pencil"></i> Edit</a></td>
<td><a data-toggle="modal" data-courseid="96599" href="#deletecoursemodal" id="deletecoursebutton" class="btn btn-danger"><i class="icon-white icon-remove"></i> Delete</a></td>
</tr>
</tbody></table>
この後、以下のように js セクションで js ファイルを呼び出しています。
<script src="js/jquery-1.10.1.js"></script>
<script src="js/jquery.dataTables.js"></script>
$(document).ready(function(event) {
$('#classeslist').dataTable({
"aoColumns": [
null
]
});
});
私も試してみましたが"aaSorting": [[ 0, "desc" ]]、うまくいきませんでした。