How to connect a pagination bar to filtered dataset and repeater in Wix, Velo?

Question

I’m trying to make a customized search page in Wix, Velo. It has been almost done; except connecting my pagination bar to filtered data presenting in a repeater. I have connected my repeater elements and pagination bar to my dataset. The problem is that since the pagination bar is connected to my dataset, any interaction with it causes the resetting of my filtered data. I can’t find any helpful post that clearly shows how to connect a pagination bar to dataset-repeater. Could you please help me to finish this search code. Thanks in advance.

The outline of my search page elements: A search input text box and a search icon, several multi-selection tags and several input text boxes for filtering my results and also a repeater for displaying the search results. The simplified structure of the search code is like:

import wixData from 'wix-data';

// Making a query using contains function
function search() {

  wixData.query("Collection1")
      .contains("title", $w('#input11').value)
      .or(wixData.query("Collection1").contains("text", $w('#input11').value))
      .or(wixData.query("Collection1").contains("date", $w('#input11').value))        

      .find()
      .then(results => {
          $w('#repeater1').data = results.items;
          let searchResults = results.items;

          // Post type tag
          if ($w("#postTypeSelectionTag").value.length > 0) {
              let newQuery = results.query;
              newQuery
                  .hasSome("postType", $w("#postTypeSelectionTag").value)
                  .find()
                  .then((newQueryResults) => {
                      $w('#repeater1').data = newQueryResults.items;
                      let newQuery = results.query;
                      return newQuery
                  })
          }
          
          //  Date  
          if (startingDatePickerValue2 !== null || endingDatePickerValue2 !== null) {

              let startingDatePickerValue = $w("#startingDatePicker").value;
              let endingDatePickerValue = $w("#endingDatePicker").value;
              
              let newQuery = results.query;
              newQuery
                  .ge("startingDate", startingDatePickerValue)                    
                  .le("endingDate", endingDatePickerValue)                    
                  .find()
                  .then((newQueryResults) => {
                      $w('#repeater1').data = newQueryResults.items;
                      let newQuery = results.query;
                      console.log(startingDatePickerValue, endingDatePickerValue)
                      return newQuery
                  })
          }
      }); 
 
   if ($w('#repeater1').data.length <= 13) {
       $w('#pagination1').collapse()
       $w('#pagination1').hide()
  }
}

// Run search function on pressing Enter key
export function input11_keyPress(event) {
  if (event.key === "Enter") {
      search()
  }
}

Answer 1

It looks like you're using wix-data queries to populate your repeater with search results and not the dataset (although you might initially populate it using the dataset, which you probably shouldn't do if your using the data API for the rest of the functionality).

In that case, the pagination bar won't work automatically as it does with dataset data. Instead, you need to write code using the Pagination API.

Basically, you need to set the currentPage and totalPages properties with the information you get in the results object from your query. That object also has currentPage and totalPages properties.

You also need to handle the pagination onChange events for when the user goes to a new page and perform the appropriate query for the new page using the query skip and limit functions.