Hi all,
I have an issue with my pagination when I am using my dropdowns. My dataset (Video) has 14 items. I have 12 per page meaning that I have 2 pages for this dataset with a pagination bar to navigate.
If I filtrate my items with the dropdowns then I expect to have less displayed item. For example if I select “Blu-Ray” on the “classification” dropdown then I only have 7 items displayed on the first page which is exactly what I expect. But the pagination bar is always here and if I move to page 2 then I have the item #13 and item #14 which are not “Blu-Ray”.
I put a video for more clarity.
Any idea how I can address this ?
Thank you
Can you show us your code?
@bwprado
Yes sure. Please find it below
// allows to return on top of page when move to next page
$w . onReady ( function () {
$w ( ‘#pagination1’ ). onClick (() => {
$w ( ‘#header1’ ). scrollTo ();
});
})
// import data
import wixData from ‘wix-data’ ;
// search button
export function button1_click ( event ) {
search ();
}
function search ( ) {
if ( $w ( “#dropdown1” ). value && $w ( “#dropdown2” ). value ) {
// Query for both.
wixData . query ( “VideoAll” )
. eq ( “origin” , String ( $w ( “#dropdown1” ). value ))
. and ( wixData . query ( “VideoAll” ). contains ( “classification” , String ( $w ( “#dropdown2” ). value )))
. find ()
. then ( results => {
$w ( “#Badgerepeater” ). data = results . items ;
});
} else if ( $w ( “#dropdown2” ). value ) {
// Query ‘classification’ only when #dropdown2 is filled
wixData . query ( “VideoAll” )
. eq ( “classification” , String ( $w ( “#dropdown2” ). value ))
. find ()
. then ( results => {
$w ( “#Badgerepeater” ). data = results . items ;
})
} else if ( $w ( “#dropdown1” ). value ) {
// Query ‘Origin’ only when #dropdown1 is filled
wixData . query ( “VideoAll” )
. eq ( “origin” , String ( $w ( “#dropdown1” ). value ))
. find ()
. then ( results => {
$w ( “#Badgerepeater” ). data = results . items ;
})
} else {
// Error case
}}
// reset field button
export function button2_click ( event ) {
$w ( “#dataset1” ). setFilter ( wixData . filter ())
$w ( “#dropdown1” ). value = undefined
$w ( “#dropdown2” ). value = undefined
}
Where is the code for the next results? How do you show the next results from the filter?
I guess I don’t have a code for this 
I am trying to make all my settings with this dataset which has only 14 items before to duplicate with other datasets which contain more items.
Could you help me to set a code for this ?
Thank you
So, if you have a dataset in your page like $w(‘#dataset’), you have to have 2 repeaters, one for the items you want to display (eg: $w (‘#rptData’) ), and the other for the pagination (eg: $w ( ‘#rptPagination’ ) ).
So, you create a function that prepares the pagination repeater for the data and the click, each button is going to call a .loadPage() method with the number of the page you need.
Then you have to check how many pages you have, based on the items limit you defined in your dataset, using the .getTotalPageCount() method. Then you create a pages array to push each page with an id and label for the buttons on the pagination repeater.
aimport wixData from 'wix-data'
// This function prepares the repeater to display the data and receive click events
const prepareRepeater = () => {
$w('#rptPagination').onItemReady(($item, itemData) => {
$item('#btnPagination').label = String(itemData.label)
$item('#btnPagination').onClick(async (e) => {
$w('#dataset').loadPage(itemData.label)
})
})
}
$w.onReady(() => {
prepareRepeater() // call the function to create the repeater behavior as soon as it receives data.
$w('#dataset').onReady(() => {
const totalPages = $w('#dataset').getTotalPageCount() // gets the total numbers of pages
if (totalPages > 0) {
let pages = [] // creates empty array to store the pages
for (let i = 1; i <= totalPages; i++) {
pages.push({ _id: String(i), label: i })
}
$w('#rptPagination').data = pages // pass the prepared data to the receiver.
}
})
})
// search button
export function button1_click(event) {
// send filter values from dropdowns to filterData function
filterData($w('#dropdown1').value, $w('#dropdown2').value)
}
function filterData(origin, classification) {
// filter for origin
let filterOrigin = wixData.filter().eq('origin', String(origin))
// filter for classification
let filterClassification = wixData
.filter()
.eq('classification', String(classification))
if (origin && classification) {
$w('#dataset').setFilter(filterOrigin.and(filterClassification))
} else if (classification) {
// Query 'classification' only when #dropdown2 is filled
$w('#dataset').setFilter(filterClassification)
} else if (origin) {
// Query 'Origin' only when #dropdown1 is filled
$w('#dataset').setFilter(filterOrigin)
}
}
// reset field button
export function button2_click(event) {
$w('#dataset').setFilter(wixData.filter())
$w('#dropdown1').value = undefined
$w('#dropdown2').value = undefined
}
@bwprado
Thank you very much for your answer.
Can you just clarify what is “btnPagination” ? I put the name of my pagination bar but then “label” is red with the following message : property ‘label’ does not exist on type ‘Pagination’.
Are the both repeaters ‘rptData’ and ‘rptPagination’ supposed to be the same ? I understand the code but not sure how to apply it.
Thank you
@ffvii-serie-memorabi I’m so sorry, I didn’t know about the Pagination Element, I mainly use Editor X, and did not know there was an element to control pagination.
So, it is way easier than I thought! Just connect the Pagination element to the dataset, and whenever you filter the dataset, the pagination will reflect the filter.
import wixData from 'wix-data'
$w.onReady(() => {
})
// search button
export function button1_click(event) {
// send filter values from dropdowns to filterData function
filterData($w('#dropdown1').value, $w('#dropdown2').value)
}
function filterData(origin, classification) {
// filter for origin
let filterOrigin = wixData.filter().eq('origin', String(origin))
// filter for classification
let filterClassification = wixData
.filter()
.eq('classification', String(classification))
if (origin && classification) {
$w('#dataset').setFilter(filterOrigin.and(filterClassification))
} else if (classification) {
// Query 'classification' only when #dropdown2 is filled
$w('#dataset').setFilter(filterClassification)
} else if (origin) {
// Query 'Origin' only when #dropdown1 is filled
$w('#dataset').setFilter(filterOrigin)
}
}
// reset field button
export function button2_click(event) {
$w('#dataset').setFilter(wixData.filter())
$w('#dropdown1').value = undefined
$w('#dropdown2').value = undefined
}
@bwprado
Thank you very much! it perfectly works!
I have other questions but I will create new posts to avoid to mix topics!
Still thank you for your help