DataTables自定義分頁條數實現

背景

因項目須要，選擇了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