-1

嗨,我正在尝试在使用 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" ]]也没有工作。

4

1 回答 1

0

您的表 ID 和您对数据表的调用不匹配。

做了

   $('#courseslist').dataTable({  

不是#classeslist,它应该可以工作。

于 2013-10-23T13:31:34.977 回答