jQuery DataTable 不显示显示条目、搜索和不排序

Question

这是我第一次尝试使用 jQuery DataTable。

我读了很多文章，但我做不到。

希望有人能帮忙。

我需要建立一个显示橄榄球比赛得分的表格。 我正在构建的表应该是这样的：

<table cellpadding="0" cellspacing="0" border="0" class="display dataTable" id="example">
<thead>
<tr>
<th>Match</th>
<th colspan="3">Results</th>
</tr>
</thead>
<tbody>
<tr>
<th></th>
<th>Team</th>
<th>Halftime</th>
<th>Final Score</th>
</tr>
<tr>
<td colspan="4">Match: AA</td>
</tr>
<tr>
<td></td>
<td>Team A</td>
<td class="center">1</td>
<td class="center">2</td>
</tr>
<tr>
<td></td>
<td>Team B</td>
<td class="center">1</td>
<td class="center">2</td>
</tr>
<tr>
<td colspan="4">Match: BB</td>
</tr>
<tr>
<td></td>
<td>Team A</td>
<td class="center">1</td>
<td class="center">2</td>
</tr>
<tr>
<td></td>
<td>Team B</td>
<td class="center">1</td>
<td class="center">3</td>
</tr>
</tbody>
</table>

我希望用户能够对列进行排序： 比赛、球队、半场和最终比分。

我的代码现在的方式是，用户无法对任何内容进行排序。 当我单击列头时，它的高度会增加，并且会显示排序箭头，但注意正在排序。

我也收到警告错误：

DataTables 警告（表 id='example'）：从第 0 行的数据源请求未知参数“1”

我的实际表格如下所示：

<table class="display dataTable" id="example" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
    <th colspan="1" class="ui-state-default" rowspan="2">
        <div class="DataTables_sort_wrapper">
            Match<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"></span></div>
    </th>
    <th rowspan="1" colspan="3" class="ui-state-default" style="text-align:center">Results
    </th>
</tr>
<tr>
    <th colspan="1" rowspan="1" class="ui-state-default">
        <div class="DataTables_sort_wrapper">
            Team<span class="DataTables_sort_icon css_right ui-icon ui-icon-triangle-1-s"></span></div>
    </th>
    <th colspan="1" rowspan="1" class="ui-state-default">
        <div class="DataTables_sort_wrapper">Halftime<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"></span>
        </div>
    </th>
    <th colspan="1" rowspan="1" class="ui-state-default">
        <div class="DataTables_sort_wrapper">Final Score<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"></span>
        </div>
    </th>
</tr>
</thead>
<tbody>
<tr>
    <td>

        PBHS vs St Stithians<br>
        24/03/2012
    </td>

</tr>

<tr>

    <td></td>
    <td>PBHS 1st</td>
    <td></td>
    <td>14</td>
</tr>

<tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
</tr>
<tr>

    <td>

        PBHS vs St Stithians<br>
        24/03/2012
    </td>
    ....

我的 jQuery 代码：

$(function() {
  $('#example').dataTable({
  bJQueryUI: true
 });
});

我在页面上包含这两个文件：

<link rel="stylesheet" href="/shared/jQuery/jquery-ui-1.10.3.custom/css/smoothness/jquery-ui-1.10.3.custom.min.css">
<script src="/shared/jQuery/jquery.dataTables.js"></script>

有人可以帮忙吗？

Answer 1

    $('#tblView').dataTable({                           
       "bJQueryUI": true,
       "sPaginationType": "full_numbers",
       "bDestroy": true,
       "bSort": true,
       "bFilter": true,
    });
<link href="~/Content/themes/base/demo_page.css" rel="stylesheet" />
<link href="~/Content/themes/base/demo_table_jui.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery.ui.dialog.css" rel="stylesheet" />
<script src="~/Scripts/js/jquery.js"></script>
<script src="~/Scripts/js/jquery-ui-1.8.24.js"></script>
<script src="~/Scripts/js/jquery.dataTables.js"></script>
<script src="~/Scripts/js/dataTables.tableTools.min.js"></script>

也使用这个脚本文件

Answer 2

你的问题是

HTML

    <tr>
        <td colspan="4">Match: AA</td>
    </tr>

这是实现相同目标的另一种方式：（也许您可以添加一些 css :)）

DEMO

我将您的标题修改为：

<thead>
    <tr>
        <th>Match</th>
        <th colspan="3">Results</th>
    </tr>
    <tr>
        <th></th>
        <th>Team</th>
        <th>Halftime</th>
        <th>Final Score</th>
    </tr>
</thead>

我为每一行添加了匹配名称，并使用 JavaScript 隐藏它们并将它们组合在一起

希望对你有帮助！