之前一直都是使用bootstrap table的后端分頁,后來有一次不是服務器端分頁寫的,又比較懶,不想改后端接口太多。
考慮到數據量不算多,頂多一千條數據,就改成前端分頁,后端可以不用改什么,就配合改一下數據格式。
設置參數sidePagination: "client",client是客戶端分頁,server是服務端分頁,自不用說,其他參數選項按需使用就行。
搜索網上的使用方法,一直都無法顯示數據,直到查看bootstrap table的數據流轉源碼,才發現數據格式有問題。
網上都說數據格式是:
{
"total": 數字,
"rows": 數組
}
查看bootstrap table官網,建議的數據格式其實是分兩種(https://bootstrap-table.com/docs/api/table-options/#data),如下圖,使用服務器端分頁和不使用服務器端分頁。
按照官網建議,使用服務器端的數據格式是如上面所寫的那種數據格式,下圖為官網建議形式:
不使用服務器分頁是直接將數據以數組的形式返回,下圖為官網建議形式:
我不太記得當時是不是實驗了官網建議的直接使用數組的形式返回,我是通過查看源碼的方式,發現數據的流轉識別的是名為【data】的數據,如下圖:
我將返回的數據,改數據key為“data”,即可解決問題,成功實現前端分頁。
當然因為bootstrap table的包有很多版本,不一定所有人都會遇到一樣的問題,下面是我所用的包版本:
希望對大家排障有所幫助,反正之前我一直找不出來為什么顯示不出來數據的原因,挺浪費時間的,本來想少改東西,反倒是更費時間了。