DEMO

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 warning（table 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我隐藏它们并将其组合在一起

我希望它会帮助你！

jQuery DataTable不显示显示条目，搜索并且不排序

2 个答案:

HTML

DEMO