DataTables自定義分頁條數(shù)實(shí)現(xiàn)

xuexiangjys 發(fā)布于2019-08-22 13:48 / 1628人閱讀

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

背景

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

解決辦法

辦法其實(shí)很簡單，只需要參考DataTables的官網(wǎng)文檔就可找到。

當(dāng)時(shí)因?yàn)轫?xiàng)目趕得緊沒太多時(shí)間看英文文檔，在google上搜了好久都沒有找到合適的解決方案，最后只能暫時(shí)擱置。
最后項(xiàng)目完成后，才又去官網(wǎng)仔細(xì)看文檔，才找到相關(guān)的解決辦法~~~

前臺(tái)頁面提供選擇（搜索）框

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",
});

// 點(diǎn)擊查詢時(shí)，重新加載數(shù)據(jù)
$("#btn-search").click(function () {
    // 獲取其它數(shù)據(jù)
    var url = getSearchUrl();

    // 設(shè)置分頁參數(shù)
    // @link https://datatables.net/reference/api/page.len()
    
    // 獲取前臺(tái)選擇的單頁條數(shù)
    var length = $("#length").val();
    
    // 使用DataTables Api設(shè)置傳遞參數(shù)
    // 注：orderTable 為DataTables的一個(gè)實(shí)例
    orderTable.page.len(length);
    
    // 使用新搜索條件鏈接重新加載DataTables表格
    // @link https://datatables.net/reference/api/ajax.url().load()
    orderTable.ajax.url(url).load();
});

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

參考文檔

DataTables: page.len();

DataTables: ajax.url().load()

關(guān)于我

文章轉(zhuǎn)載自我的博客：
Heier Blog:Heier Home

云服務(wù)器 GPU云服務(wù)器自定義分頁實(shí)現(xiàn)自定義手勢(shì) 自定義如何實(shí)現(xiàn) 自定義布局怎么實(shí)現(xiàn)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/92465.html

相關(guān)文章

DataTables后臺(tái)分頁的使用

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

ChristmasBoy 2019-06-27 12:00 評(píng)論0 收藏0
重寫yii2的數(shù)據(jù)提供器ArrayDataProvider類

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

xiaokai 2019-06-27 13:56 評(píng)論0 收藏0
layui數(shù)據(jù)表格使用（一：基礎(chǔ)篇，數(shù)據(jù)展示、分頁組件、表格內(nèi)嵌表單和圖片）

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

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

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

dcr309duan 2019-08-22 16:00 評(píng)論0 收藏0
Springmvc 結(jié)合 jquery插件Datatables的使用（基于java支持的服務(wù)器處理）

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

Snailclimb 2019-08-15 15:12 評(píng)論0 收藏0