BootstrapTable 自定義頁腳-footer


 

在項目中碰到這樣一個問題,我這個表格里面需要一個總計數,位置就想加在頁碼那個位置,但是搜遍了百度沒有看到一個關於這個頁腳修改的,倒是有一些添加footerformatter的,對於我這個需求來說沒什么用,因為我想要得是不包含分頁的所有數據匯總,類似這樣:

就是包含所有數據的,不是當頁數據。
既然找不到解決辦法,那就試試來手動改一下看看
先根據頁面找到這個頁腳是在什么位置,我們按f12調出控制台(火狐)

OK,找到一個css類名為"pagination-info"的節點,
打開我們的bootstrap-table.js源碼,搜索這個節點

一下就搜到了(作者真良心啊),然后我們來看看下面說的什么
有這樣一行代碼:

this.options.formatShowingRows(this.pageFrom, this.pageTo, this.options.totalRows),

根據和頁面上的代碼對比,我們差不多可以猜到是什么了,這里有一個成員函數和幾個參數,我們順着這個成員函數繼續往下找,看看是怎么實現的:

 

根據名字搜索,我們馬上定位到這個函數的實現,可以看到是根據上面幾個參數來實現的這句話,然后呢,我們來看一下這個參數是在什么地方傳過來的,再回到剛剛的代碼:

我們需要找到這個options在哪里進行了賦值操作,當然 我們按名字搜索,那么這一個頁面基本上都是這個,我們得另外想一種辦法,我們去直接搜索后面的totalRows,好,現在就只有一個結果,我們來依次查看:

文檔的最上方,很容易看出這個是設置默認值,好的我們繼續往下(跳過我們上面看到的那一段設置頁碼文字的代碼),在頁面下方有這樣幾句代碼:

 可以看出這是一個請求操作,對比我們在使用中的設置很容易明白這就是我們通過表格獲取數據的代碼,而且 這個totalRows的賦值就在這里,同樣 頁面上沒有更多的搜索結果,好了,現在我們得到這樣幾個信息:
    1. 需要給options對象加一個我們需要的屬性,設置它的默認值。
    2. 在這個位置去給他獲取屬性值,也就是數據。
    3. 修改代碼呈現最終效果。
OK,我們來開始修改
首先增加一個屬性:

就叫goldNumber吧,放在totalRows下面,以便於修改,
其次,在獲取數據的地方給它賦值:

這里的totalGolds就是你請求結果的json對象的名字
然后,我們再添加一個跟頁碼類似的函數

放在一起,好操作
OK,最后一步,調用我們的函數:

繞了一圈又回到原點。
事情做完了,來我們看一下結果

結果出來了,跟我當初想的一樣,以上就是修改這頁腳的方法,當然,里面放的都是html代碼,你可以根據自己的需要寫出自己想要的效果。
哦,最后再分享一下我服務端返回的數據結果以供參考:

看圖直觀點,大家跟着改一下就行了,其他代碼就懶得貼了。

請輕噴!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM