DataTables自定義分頁條數實現

xuexiangjys 發布于2019-08-22 13:48 / 1620人閱讀

摘要：背景因項目需要，選擇了這款表格插件做數據展示。在實際開發過程中，需要將所有的搜索條件放在頁面頂部，所以我需要的搜索和分頁條數多帶帶提出來。解決辦法辦法其實很簡單，只需要參考的官網文檔就可找到。

背景

因項目需要，選擇了DataTables這款表格插件做數據展示。在實際開發過程中，需要將所有的搜索條件放在頁面頂部，所以我需要DataTables的搜索和分頁條數多帶帶提出來。

解決辦法

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

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

前臺頁面提供選擇（搜索）框

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();
});

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

參考文檔

DataTables: page.len();

DataTables: ajax.url().load()

關于我

文章轉載自我的博客：
Heier Blog:Heier Home

GPU云服務器云服務器自定義分頁實現自定義手勢自定義如何實現自定義布局怎么實現

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92465.html

DataTables后臺分頁的使用

摘要：提供了完善的前后臺分頁功能，現將后臺分頁的學習和使用過程總結如下，方便日后參考。 DataTables提供了完善的前后臺分頁功能，現將后臺分頁的學習和使用過程總結如下，方便日后參考。一、前臺頁面的配置 DataTables幾乎可以在不改變前臺代碼部分即可實現前臺分頁到后臺分頁的轉換，唯一需要做的就是在代碼中開啟DataTables后臺分頁功能即可： serverSide : true...

ChristmasBoy 2019-06-27 12:00 評論0 收藏0
重寫yii2的數據提供器ArrayDataProvider類

摘要：再看看另一個方法，的提供的數據統計總條數的方法是的，默認計算分頁總數是根據數組計算的，而的數據就是我們查詢賦值給提供器的。統計總數預處理函數直接獲取通過函數獲取傳遞給數據提供器的數據總和。首先看看ArrayDataProvider官方的doc： ArrayDataProvider implements a data provider based on a data array.Ar...

xiaokai 2019-06-27 13:56 評論0 收藏0
layui數據表格使用（一：基礎篇，數據展示、分頁組件、表格內嵌表單和圖片）

摘要：表格展示神器之一表格前言在寫后臺管理系統中使用最多的就是表格數據展示了，使用表格組件能提高大量的開發效率，目前主流的數據表格組件有等博主個人比較傾向于，極簡，卻又不失飽滿的內在，體積輕盈，組件豐盈。表格展示神器之一：layui表格前言：在寫后臺管理系統中使用最多的就是表格數據展示了，使用表格組件能提高大量的開發效率，目前主流的數據表格組件有bootstrap table、layui ...

番茄西紅柿 2019-04-23 13:27 評論0 收藏0
Springmvc 結合 jquery插件Datatables的使用（基于java支持的服務器處理）

摘要：但是這個插件本身還是挺不錯的，對于報表的支持比較好。下面應該寫服務端了，這呢隨機獲取表格數據表格數據以格式返回，返回大概就是這樣了。前言覺得Datatables的中文文檔寫的太差勁了，開發手冊和文檔都是很不友好，demo也不夠完善，不適合直接想使用的人來看，需要用過一段時間之后再來看可能才會有柳暗花明的發現，不然就有點不明所以的感覺。但是這個插件本身還是挺不錯的，對于報表的支持比...

dcr309duan 2019-08-22 16:00 評論0 收藏0
Springmvc 結合 jquery插件Datatables的使用（基于java支持的服務器處理）

摘要：但是這個插件本身還是挺不錯的，對于報表的支持比較好。下面應該寫服務端了，這呢隨機獲取表格數據表格數據以格式返回，返回大概就是這樣了。前言覺得Datatables的中文文檔寫的太差勁了，開發手冊和文檔都是很不友好，demo也不夠完善，不適合直接想使用的人來看，需要用過一段時間之后再來看可能才會有柳暗花明的發現，不然就有點不明所以的感覺。但是這個插件本身還是挺不錯的，對于報表的支持比...

Snailclimb 2019-08-15 15:12 評論0 收藏0