All Snippets
Long awaited pagination bar is here for Studio. You can style it as you like.
How to
Create 1 or more repaters with buttons and leave the rest to the snippet.
New to our site? Please see our quick tutorial on how to work with our snippets
Setting | Description |
|---|---|
$w.onReady(() => {
DatasetPagination({
datasetId: '#dataset1',
repeaters: [
{ repeaterId: '#repeater1', buttonId: '#button3' },
{ repeaterId: '#repeater2', buttonId: '#button4' }
],
mainRepeaterId:'#repeaterStudents',
pageSize: 10,
})
})
async function DatasetPagination({datasetId:e,repeaters:t,mainRepeaterId:a,pageSize:n}){
if(!a||!e||!n)return;const o=$w(e);if(!o?.id)return
;await o.onReadyAsync(),async function(){o.setPageSize(n)
;const e=o.getTotalCount();t.forEach((({repeaterId:t})=>$w(t).data=Array.from({
length:Math.ceil(e/n)},((e,t)=>({_id:`${t+1}`})))))
}(),o.onCurrentIndexChanged((()=>{
console.log("onCurrentIndexChanged"),d=1,c(),r=1}));let r=1,d=1
;t.forEach((({repeaterId:e,buttonId:t})=>{$w(e).onItemReady((e=>(t,{_id:a},n)=>{
const o=t(e);o.label=a,o.onClick(i(n+1)),n+1===r&&o.disable()})(t))}))
;const c=()=>t.forEach((({repeaterId:e,buttonId:t})=>$w(e).forEachItem(((e,a,n)=>{
const o=e(t);n+1===r?o.enable():n+1===d&&o.disable()})))),i=e=>async()=>{d=e,c()
;const{items:t}=await o.getItems((e-1)*n,n);$w(a).data=t,r=d}}
Title
Title