分頁外掛程式
DataTables 呈現給終端用戶的分頁選項樣式,會大大影響表格的外觀和感覺,以及互動行為。 DataTables 有四種內建的分頁控制類型 (pagingType
),透過以下的分頁外掛程式,您可以新增額外的選項。
如何使用
若要使用分頁外掛程式,您必須在載入 DataTables 函式庫之後,但在初始化 DataTable 之前,加入下方可用的外掛程式的分頁外掛程式碼。在初始化 DataTable 時,您還必須告知它使用此外掛程式,而不是使用預設值,方法是將 pagingType
設定為此外掛程式所需的值。
例如,下列程式碼使用了儲存於檔案中的捲動分頁外掛程式
<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.scrollingPagination.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').dataTable( {
"pagingType": "scrolling"
} );
} );
</script>
請注意,與 DataTables 的其他外掛程式不同,分頁外掛程式尚未以 ES 或 CommonJS 模組的形式提供。未來將會針對 DataTables 2 的分頁 API 進行改進,解決此問題。
外掛程式
bootstrap_input | 外掛程式提供與 `default` 分頁類型相同的功能(請參閱 `pagingType` 選項),但具有跳轉頁面的輸入欄位,適用於 bootstrap 主題。 |
extjs | ExtJS 風格的分頁 |
four_button | 顯示向前、向後、第一頁和最後一頁按鈕。 |
full_numbers_no_ellipses | 與「full_numbers」相同的分頁,但不含省略符號 |
input | 顯示一個輸入元素,讓使用者可以在其中輸入頁碼 |
scrolling | 將頁面變更顯示為表格的重新繪製,捲動記錄。 |
select | 顯示使用者可以從中選擇的頁面 `dt-tag select` 清單。 |
simple_incremental_bootstrap | 顯示向前/向後按鈕和所有已知的頁碼。 |
simple_numbers_no_ellipses | 與「simple_numbers」相同的分頁,但不含省略符號 |