为什么 Datatables 插件不起作用？

Question

我正在尝试使用 DataTable 构建一个 table，我在此处在线找到了一个 DataTable 的示例：Example

基于例子，我写了我的代码MyTable:

<head>
 <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
  <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css">


    <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
</head>

<body>
<div class="container">
<table id = "guestList" >
<thead>
<tr>
<th>Order#</th>
            <th>Qty</th>
            <th>Customer</th>
            <th>Order Date</th>
            <th>Ticket date</th>
            <th>Price</th>
            <th>Delivery Method</th>
            <th>Option</th>
        </tr>
</thead>
<tbody>
<tr>
<td style="padding: 10px;">abf0c80</td>
<td style="padding: 10px;">2</td>
<td style="padding: 10px;">Ashukur </td>
<td style="padding: 10px;">2015-07-14 13:51:14</td>
<td style="padding: 10px;">10.0000</td>
<td style="padding: 10px;">0.0000</td>
<td style="padding: 10px;">print</td>
</tr>
<tr>
<td style="padding: 10px;">abf0af9</td>
<td style="padding: 10px;">4</td>
<td style="padding: 10px;">Boris</td>
<td style="padding: 10px;">2015-07-14 13:51:14</td>
<td style="padding: 10px;">7.0000</td>
<td style="padding: 10px;">0.0000</td>
<td style="padding: 10px;">print</td></tr>
<tr>
<td style="padding: 10px;">abf0b8b</td>
<td style="padding: 10px;">3</td>
<td style="padding: 10px;">Ashukur </td>
<td style="padding: 10px;">2015-07-14 13:51:14</td>
<td style="padding: 10px;">17.0000</td>
<td style="padding: 10px;">0.0000</td>
<td style="padding: 10px;">print</td>
</tr>
</tbody>
</table>
</div>
</body>

谁能帮我查一下密码？我不知道为什么我的代码不起作用。

Answer 1

您的 tbody 行中的每一行都缺少一个 <td></td>。

<tbody> 中 <td> 的数量需要等于 <thead> 中 <th> 的数量。

在此处查看更新的 fiddle：http://jsfiddle.net/q6164rfr/

Answer 2

因为您需要正确标记。 <th> 的 的数量必须 与每一行中 <td> 的数量相匹配。即

<div class="container">
    <table id="guestList">
        <thead>
            <tr>
                <th>Order#</th>
                <th>Qty</th>
                <th>Customer</th>
                <th>Order Date</th>
                <th>Ticket date</th>
                <th>Price</th>
                <th>Delivery Method</th>
                <th>Option</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="padding: 10px;">abf0c80</td>
                <td style="padding: 10px;">2</td>
                <td style="padding: 10px;">Ashukur </td>
                <td style="padding: 10px;">2015-07-14 13:51:14</td>
                <td style="padding: 10px;">10.0000</td>
                <td style="padding: 10px;">0.0000</td>
                <td style="padding: 10px;">print</td>
                <td></td>
            </tr>
            <tr>
                <td style="padding: 10px;">abf0af9</td>
                <td style="padding: 10px;">4</td>
                <td style="padding: 10px;">Boris</td>
                <td style="padding: 10px;">2015-07-14 13:51:14</td>
                <td style="padding: 10px;">7.0000</td>
                <td style="padding: 10px;">0.0000</td>
                <td style="padding: 10px;">print</td>
                <td></td>
            </tr>
            <tr>
                <td style="padding: 10px;">abf0b8b</td>
                <td style="padding: 10px;">3</td>
                <td style="padding: 10px;">Ashukur </td>
                <td style="padding: 10px;">2015-07-14 13:51:14</td>
                <td style="padding: 10px;">17.0000</td>
                <td style="padding: 10px;">0.0000</td>
                <td style="padding: 10px;">print</td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>

已清理 fiddle -> http://jsfiddle.net/9hGym/200/

为什么 Datatables 插件不起作用？

Why is the Datatables plug-in not working?

jquery

datatables