jQuery Datatable是一款非常強(qiáng)大的jQuery插件,它可以幫助我們更方便地管理和展示數(shù)據(jù)。其中比較重要的一項(xiàng)功能就是標(biāo)題調(diào)整。
在Datatable中,標(biāo)題分為表頭和列頭兩種類型。表頭是一行,表示整個(gè)表格的標(biāo)題;列頭是多行,表示各個(gè)列的標(biāo)題。我們可以通過(guò)設(shè)置標(biāo)題來(lái)使表格更加清晰美觀。
<table>
<thead>
<tr>
<th>序號(hào)</th>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>張三</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>女</td>
<td>25</td>
</tr>
</tbody>
</table>
對(duì)于表頭,我們可以設(shè)置中文或英文的表格名稱。例如:
$('#example').DataTable({
language: {
info: "當(dāng)前顯示第 _START_ 至 _END_ 項(xiàng)結(jié)果,共 _TOTAL_ 項(xiàng)",
paginate: {
first: "首頁(yè)",
previous: "上一頁(yè)",
next: "下一頁(yè)",
last: "尾頁(yè)"
},
aria: {
sortAscending: ": 小到大排序",
sortDescending: ": 大到小排序"
},
emptyTable: "表格中數(shù)據(jù)為空",
infoEmpty: "未找到相關(guān)數(shù)據(jù)",
lengthMenu: "每頁(yè)顯示 _MENU_ 條數(shù)據(jù)",
searchPlaceholder: "查找...",
zeroRecords: "沒有匹配結(jié)果"
},
columns: [
{ title: "序號(hào)" },
{ title: "姓名" },
{ title: "性別" },
{ title: "年齡" }
]
});
對(duì)于列頭,我們可以設(shè)置多級(jí)標(biāo)題,例如:
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th rowspan="2">序號(hào)</th>
<th colspan="2">個(gè)人信息</th>
<th colspan="2">家庭信息</th>
</tr>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>父親</th>
<th>母親</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>張三</td>
<td>20</td>
<td>張爸爸</td>
<td>張媽媽</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>25</td>
<td>李爸爸</td>
<td>李媽媽</td>
</tr>
</tbody>
</table>
以上就是標(biāo)題調(diào)整的基本用法,可以根據(jù)需求自由修改。