DataTables
為您的表格提供
進階互動功能。
Editor
適用於 DataTables 的
綜合編輯函式庫。
手冊
下載
≡ 顯示網站導覽
2011年5月10日 星期二

使用 DataTables 創建美觀又實用的表格

更新 - 2012年2月13日：本文已針對 DataTables 1.9 進行更新，該版本使用 A 標籤而非 SPAN 作為分頁控制項。

DataTables 預設啟用了豐富的功能（如零配置範例所示），但 DataTables 套件中包含的範例樣式表刻意設計得相當基本。有時您會希望將表格的外觀和風格與預設樣式更緊密地整合。

幸運的是，為 DataTables 表格設定樣式實際上相對簡單，我將展示如何逐步建立樣式，使您的表格看起來像本文中下方顯示的表格。在本文中，我將僅使用 DataTables 的非常基本初始化，並專注於美觀的 CSS 樣式設定！我將以 Inayaili de Leon 的出色工作為基礎進行此範例，最終我們會得到一個如下所示的表格

表格

首先，我們需要一個要顯示的表格。您無疑會有自己的表格需要設定樣式，但在這個範例中，我將使用蘇格蘭政府關於學生人數的一些統計資料。也許這不是最激勵人心的資訊，但卻是在網站上呈現統計表格的完美範例。基本未設定樣式且未編寫腳本的表格如下所示

<table id="example" border="0" cellpadding="0" cellspacing="0" class="pretty">
    <thead>
        <tr>
            <th rowspan="2">Local authority</th>
            <th colspan="7">Scottish domiciled students in HE</th>
        </tr>
        <tr>
            <th>2005-06</th>
            <th>2006-07</th>
            <th>2007-08</th>
            <th>2008-09</th>
            <th>2009-10</th>
            <th>% change<br>over last year</th>
            <th>% change<br>since 2005-06</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th scope="row">Total</th>
            <td>212.920</td>
            <td>214.860</td>
            <td>206.390</td>
            <td>207.535</td>
            <td>213.210</td>
            <td>2.7</td>
            <td>0.1</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <th scope="row">Aberdeen City</th>
            <td>9.750</td>
            <td>9.850</td>
            <td>9.945</td>
            <td>9.945</td>
            <td>10.080</td>
            <td>1.4</td>
            <td>3.4</td>
        </tr>
        ...
    </tbody>
</table>

請注意，由於表格主體行中有 TH 元素，此範例使用DataTables 1.8，其中能夠在主體中使用 TH 元素是一項新功能。我們要使用的完整基本頁面可在此處取得。

樣式和腳本基礎

為了保持理智並為表格樣式設定提供共同的基準，我將包含 YUI 3 重置樣式表。此樣式表基本上會從檢視網頁瀏覽器中移除內建的預設樣式，以便為所有瀏覽器中的樣式設定提供共同的起點。這對於表格特別有用，因為瀏覽器對於各種元素通常會有不同的預設樣式。此重置樣式表是使用以下 HTML 包含的

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">

我也在我的頁面中新增了一些基本樣式，以便為我們的工作提供一點框架（字型大小、內容寬度等）。

接下來，我們包含並執行使用 DataTables 增強表格所需的 Javascript。這是透過包含 jQuery 和 DataTables，然後初始化 DataTables 來完成的。在此特定情況下，我選擇透過指定sPaginationType參數來使用內建的 "full_numbers" 分頁樣式。這就是我們設定表格所需的所有 Javascript。

<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        $('#example').dataTable( {
            "sPaginationType": "full_numbers"
        } );
    } );
</script>

DataTables 框架

現在我們可以開始為我們的表格及其元件設定樣式了。這裡首先要看的是 DataTables 新增的各種表格控制項的位置。這些是控制和顯示有關表格資訊的元素

  • 表格長度控制項 - DIV 類別 "dataTables_length"
  • 篩選輸入 - DIV 類別 "dataTables_filter"
  • 資訊輸出 - DIV 類別 "dataTables_info"
  • 分頁控制項 - DIV 類別 "dataTables_paginate"

這些元素在 DOM 中的順序由 sDom 參數控制，這會直接影響您將如何為元素設定樣式。在此情況下，我們使用 sDom 的預設設定，因此順序與上面的列表相同，表格插入在篩選和資訊元素之間。若要定位各種控制項元素，我們可以使用以下 CSS 將它們浮動到正確的位置。請注意，我也加入了醒目標示色彩，以便輕鬆查看每個元素的位置。此外，我還為各種元素加入了一些邊距，以便它們在視覺上能很好地圍繞表格。

div.dataTables_length {
    float: left;
    background-color: red;
}

div.dataTables_filter {
    float: right;
    background-color: green;
}

div.dataTables_info {
    float: left;
    background-color: blue;
}

div.dataTables_paginate {
    float: right;
    background-color: yellow;
}

div.dataTables_length,
div.dataTables_filter,
div.dataTables_paginate,
div.dataTables_info {
    padding: 6px;
}

此外，由於我們使用浮動元素，我們需要考慮清除它們。在此情況下，表格需要清除分頁長度和篩選輸入，而表格之後的任何內容都需要清除分頁和資訊元素。對於前者，我們可以使用簡單的 clear: both，但對於後者，我們可以使用自清除技術。

table.pretty {
    clear: both;
}

/* Self clearing - */
div.dataTables_wrapper:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
html[xmlns] .dataTables_wrapper { display: block; }
* html .dataTables_wrapper { height: 1%; }

表格樣式

接下來是為表格本身新增樣式，使其看起來確實不錯。首先，我們希望將表格寬度設定為 DataTables 容器元素的 100%（因為預設情況下，瀏覽器會將其寬度縮小到所需的最小尺寸，如上例所示）。然後，我們希望為表格中的儲存格加入一些邊距和白色邊框。請注意，YUI 重置樣式表設定 table { border-collapse: collapse }，因此我們無需擔心儲存格邊框會大於 1px。

table.pretty {
    width: 100%;
    clear: both;
}

table.pretty td,
table.pretty th {
    padding: 5px;
    border: 1px solid #fff;
}

對於標頭儲存格，我們只需加入背景顏色，並將文字對齊到儲存格的中心。我們這樣做

/* Header cells */
table.pretty thead th {
    text-align: center;
    background: #66a9bd;
}

在表格主體中，我們混合使用了 TH 和 TD 元素，以賦予表格標記語義意義。這對於視覺樣式設定也很有用，允許 CSS 選取器根據需要選取儲存格。在此情況下，TH 元素（提供行標頭）和 TD 元素（提供行內容）將被賦予背景顏色和不同的文字對齊方式。另請注意，DataTables 將 'odd' 和 'even' 類別新增至表格中的 TR 元素，以便輕鬆地為表格加入斑馬條紋（在此情況下，我們僅使用 'odd' 類別）。

/* Body cells */
table.pretty tbody th {
    text-align: left;
    background: #91c5d4;
}

table.pretty tbody td {
    text-align: center;
    background: #d5eaf0;
}

table.pretty tbody tr.odd td { 
    background: #bcd9e1;
}

頁尾與主體一樣，再次混合使用了 TH 和 TD 元素，以提供語義意義。與表格中的其他儲存格一樣，我們加入了背景顏色（在此情況下為綠色），以強調此行的重要性。

/* Footer cells */  
table.pretty tfoot th {
    background: #b0cc7f;
    text-align: left;
}

table.pretty tfoot td {
    background: #d7e1c5;
    text-align: center;
    font-weight: bold;
}

最後，我們為 DataTables 放置在頁面上以包含表格及其所有控制項元素的 DIV 元素新增背景顏色。這有效地為表格提供了頁首和頁尾

div.dataTables_wrapper {
    background-color: #719ba7;
}

排序和分頁

我們快完成了 - 非常接近了！只需考慮最後兩點：DataTables 新增的表格排序和分頁控制項。對於排序，這在視覺上是由 DataTables 放置在每欄的 TH 元素上的類別所控制的。

  • th.sorting_asc - 表格依此欄排序 - 遞增
  • th.sorting_desc - 表格依此欄排序 - 遞減
  • th.sorting - 表格可以依此欄排序

為了在視覺上顯示這一點，我們可以使用背景影像來指示某欄正在排序，或者可以透過按一下某欄來排序。

table.pretty thead th.sorting_asc {
    background: #66A9BD url('images/sort_asc.png') no-repeat right center;
}

table.pretty thead th.sorting_desc {
    background: #66A9BD url('images/sort_desc.png') no-repeat right center;
}

table.pretty thead th.sorting {
    background: #66A9BD url('images/sort_both.png') no-repeat right center;
}

分頁控制項的樣式設定稍微複雜一些，但同樣主要是關於邊距和色彩。DataTables 使用許多類別來協助樣式設定

  • a.paginate_button - 提供給用於分頁控制項的元素（即每個按鈕）的類別
  • a.paginate_active - 提供給顯示目前表格所在頁面的元素（請注意，這會取代 paginate_button 類別）。
  • a.paginate_button_disabled - 新增至按一下時不會產生任何效果的元素（例如，當您已經在第一頁時的「第一頁」）。

在這裡，我們讓 A 元素更像按鈕，讓它們使用 display: inline-block 並加入樣式，以便在滑鼠停留在上方時將游標變更為手形。另請注意，為了提供一致的檢視和這些按鈕的目標，設定了數字按鈕的固定寬度（div.dataTables_paginate span>a）。最後，請注意，資訊元素 (div.dataTables_info) 需要一點額外的上邊距，以便與分頁按鈕正確對齊。

a.paginate_button,
a.paginate_active {
    display: inline-block;
    background-color: #608995;
    padding: 2px 6px;
    margin-left: 2px;
    cursor: pointer;
    *cursor: hand;
}

a.paginate_active {
    background-color: transparent;
    border: 1px solid black;
}

a.paginate_button_disabled {
    color: #3d6672;
}
.paging_full_numbers a:active {
    outline: none
}
.paging_full_numbers a:hover {
    text-decoration: none;
}

div.dataTables_paginate span>a {
    width: 15px;
    text-align: center;
}

div.dataTables_info {
    padding: 9px 6px 6px 6px;
}

結論

在本文中，我們已經了解如何透過使用 DataTables 和一些基本 CSS 來將表格設定為有吸引力、獨特且實用。透過此處顯示的基本框架，可以輕鬆修改樣式，使其與您的網站順利整合。請在論壇中留言，分享您設計出的一些樣式！

希望您喜歡這篇文章！論壇中有一個主題用於對這篇文章發表評論和討論。

頁面導覽

DataTables

DataTables 由 SpryMedia Ltd 設計和建立。
© 2007-2024 MIT 授權。隱私權政策。支持者。
SpryMedia Ltd 在蘇格蘭註冊，公司編號為 SC456502。