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
 });
});

ページに次の 2 つのファイルを含めます。

<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 に答える