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

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

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

背景

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

解決辦法

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

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

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

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

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

    // 設(shè)置分頁參數(shù)
    // @link https://datatables.net/reference/api/page.len()
    
    // 獲取前臺選擇的單頁條數(shù)
    var length = $("#length").val();
    
    // 使用DataTables Api設(shè)置傳遞參數(shù)
    // 注：orderTable 為DataTables的一個實例
    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ù)器自定義分頁實現(xiàn)自定義手勢自定義如何實現(xiàn) 自定義布局怎么實現(xiàn)

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/92465.html

相關(guān)文章

DataTables后臺分頁的使用

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

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

摘要：再看看另一個方法，的提供的數(shù)據(jù)統(tǒng)計總條數(shù)的方法是的，默認(rèn)計算分頁總數(shù)是根據(jù)數(shù)組計算的，而的數(shù)據(jù)就是我們查詢賦值給提供器的。統(tǒng)計總數(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 評論0 收藏0
layui數(shù)據(jù)表格使用（一：基礎(chǔ)篇，數(shù)據(jù)展示、分頁組件、表格內(nèi)嵌表單和圖片）

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

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

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

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

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

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