在mongoDB的分頁查詢中我們一般會(huì)使用到limit skip sort砂代，在這里我們以mongoose為例前端采用antd的table組件來完成一個(gè)列子剑按。
首先只有分頁的話我們?cè)趖able組件的paginition中需要傳遞給后臺(tái)的是當(dāng)前頁數(shù)恩沛，每條頁數(shù)
image.png
data :{
limit: pagination.current,
page :pagination.pageSize,
}
后臺(tái)接收到后以mongoose為例子
Model.find({}, null, {
limit,
skip: (page-1)*limit,
lean: true
})
但是在真實(shí)場(chǎng)景下我們也許還需要做一些sort或者filter的需求铺根，在antd中實(shí)現(xiàn)如下圖
image.png
image.png
當(dāng)table 發(fā)生變化時(shí)我們有三個(gè)參數(shù)pagination, filters, sorter
我們直接把傳遞給后臺(tái)
data :{
limit: pagination.current,
page :pagination.pageSize,
sortField: sorter.field,
sortOrder: sorter.order,
filter: filters
}
注意點(diǎn)：
- sortOrder傳過來時(shí)會(huì)有'ascend' 'descend' false這三種但是mongoDB不支持ascend和descend所以我們需要切換
const sortOrder = sortOrder === 'ascend' ? 1 : 0;
- 可能filter從前臺(tái)傳遞過來的是多條數(shù)據(jù)所以我們需要改造下
const newFilter={}
console.log(filter) // { Environment: [ 'PreProd', 'Production' ] }
if(filter){
for (let val of Object.entries(filter)){
console.log(val[1])
if(val[1].length !== 0) {
newFilter[val[0]] = {"$in": val[1]}
}
}
}
console.log(newFilter) // { Environment: { '$in': [ 'PreProd', 'Production' ] } }
- sort也是以對(duì)象形式傳遞
let sortObj = {}
sortObj[sortField] = sortOrder
最終
Model.find(newFilter, null, {
limit,
skip: (page-1)*limit,
lean: true,
sort: sortObj
})
