0

这是我第一次尝试使用 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>

有人可以帮忙吗？

4

2 回答 2

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>

也使用这个脚本文件

于 2014-07-17T11:46:33.640 回答
0

你的问题是

HTML

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

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

演示

我将您的标题修改为：

<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 隐藏它们并将它们组合在一起

我希望它会帮助你！

于 2013-08-11T17:18:21.460 回答