DataTables自定義分頁條數實現

Heier發表於2018-01-14

背景

因專案需要，選擇了DataTables這款表格外掛做資料展示。在實際開發過程中，需要將所有的搜尋條件放在頁面頂部，所以我需要DataTables的搜尋和分頁條數單獨提出來。

解決辦法

辦法其實很簡單，只需要參考DataTables的官網文件就可找到。

當時因為專案趕得緊沒太多時間看英文文件，在google上搜了好久都沒有找到合適的解決方案，最後只能暫時擱置。
最後專案完成後，才又去官網仔細看文件，才找到相關的解決辦法~~~

  • 前臺頁面提供選擇（搜尋）框
<select class="input w100 select-init" name="length" id="length" init="10">
    <option value="0">單頁條數</option>
    <option selected value="10">10</option>
    <option value="20">20</option>
    <option value="50">50</option>
</select>
<!-- more code here -->
<button type="button" class="btn" id="btn-search">查詢</button>
  • js處理檢視邏輯
var orderTable = $(`#order_list`).DataTable({
    "processing": true,
    "serverSide": true,
    // 去掉過濾
    "bFilter": false,
    // 禁止選擇分頁
    // "paging": false,
    "ajax": url,
    "ordering": false,
    "language": {
        "url": "/static/commonsell/lib/datatable/lang/Chinese.lang"
    },
    "drawCallback": function (settings) {
        console.info(`DataTables has redrawn the table`);
    },
    "dom": `<"toolbar">frtip`,
});

// 點選查詢時，重新載入資料
$("#btn-search").click(function () {
    // 獲取其它資料
    var url = getSearchUrl();

    // 設定分頁引數
    // @link https://datatables.net/reference/api/page.len()
    
    // 獲取前臺選擇的單頁條數
    var length = $("#length").val();
    
    // 使用DataTables Api設定傳遞引數
    // 注：orderTable 為DataTables的一個例項
    orderTable.page.len(length);
    
    // 使用新搜尋條件連結重新載入DataTables表格
    // @link https://datatables.net/reference/api/ajax.url().load()
    orderTable.ajax.url(url).load();
});

至此，自定義分頁條數問題已解決，就是這麼簡單~

參考文件

  1. DataTables: page.len();
  2. DataTables: ajax.url().load()

關於我

文章轉載自我的部落格：
Heier Blog:Heier Home

相關文章