Number of items per page in repeater

Although the number of items on the dataset is set to 12 (I’ve also tried setting it to other numbers), the repeater shows every item in the database in a long list on a single page. I must be missing something, but I can’t see what.

Help much appreciated.

Are you using any code? If so, please share so we can see what you’re doing.

Yes, there’s a fair amount of code, mostly relating to searches, but I’m not sure what part could be relevant as I suppose the repeater is displayed before any code is executed.

Anyway, here is the body of it:

import { local } from ‘wix-storage’ ;
import wixData from ‘wix-data’ ;

$w . onReady ( function () {
$w ( ‘#searchFail’ ). hide ();
$w ( ‘#textClassics’ ). hide ();
var sameName = local . getItem ( “searchName” );
$w ( “#name” ). value = sameName ;
var sameEmail = local . getItem ( “searchEmail” );
$w ( “#email” ). value = sameEmail ;

$w ( '#dynamicDataset' ). onReady ( **function**  () { 
    uniqueDropDown1 (); 
    search1 (); 

   
$w ( "#magGlass1" ). onClick (( event ) => { 
        console . log ( "button clicked" );    
        nameSearch  ()});   
    $w ( "#authorSearch" ). onKeyPress (( event ) => { 
        **let**  key  =  event . key 
        **if**  ( key  ===  "Enter" ) { 
        console . log ( "field clicked" );    
        nameSearch ()}});   
}); 

});

// triggers search on name
function nameSearch () {
$w ( “#email” ). value = “xxxx” ;
$w ( ‘#name’ ). value = $w ( ‘#authorSearch’ ). value ;
search1 ()};

// searches authorpages database with author name
// sorts on most liked
function search1 () {
$w ( ‘#listRepeater’ ). hide ();
$w ( ‘#searchFail’ ). hide ();
$w ( ‘#textClassics’ ). hide ();
wixData . query ( ‘authorpages’ )
. descending ( “likes” )
. contains ( ‘fullName’ , $w ( “#name” ). value )
. or ( wixData . query ( ‘authorpages’ )
. eq ( ‘email’ , $w ( “#email” ). value ))
. find ()
. then ( res => {
$w ( “#anchor1” ). scrollTo ();
if ( res . items . length > 0 )
{ $w ( ‘#listRepeater’ ). data = res . items ;
$w ( ‘#listRepeater’ ). show ();}
else {
$w ( ‘#searchFail’ ). show ()
$w ( ‘#listRepeater’ ). data = res . items }
});
}

Is listRepeater connected to the dataset? You are populating listRepeater using a wix-data query, which has nothing to do with the dataset? The dataset is configured for a maximum of 12 items, which would then be displayed in the repeater. However, a database query has a default maximum of 50.

Mixing dataset and wix-data code together to populate a Repeater is incorrect. You can either change the code in the search() function to filter the dataset, or you should disconnect the dataset and populate the Repeater using only wix-data code. You can’t mix them.

I’m moving this thread to the Coding with Velo category.

So my best option would be to disconnect the repeater from the dataset and let the code populate it.
Can you tell me how I can then limit the items displayed per page to 12?

Use the query limit() function .

If you want, you can page through the rest of the items. See the WixDataQueryResult API for more information.

Thanks, that limits the items on the page, but I need to go to the next page. The API mentions next() and prev() functions, but I can’t see how to code those. I’ve put a pagination bar on the page, can I connect to that somehow?

Also, when the repeater is disconnected from the dataset, I’m just getting the first (most recently created) item on the database appearing 12 times. Presumably I need to create some sort of loop to put up all the items from the search, then jump to a new page when the count reaches 12.

With the dataset disconnected, you’ll need to add an onItemReady() function to render the Repeater items.

Here’s an example of paging using a Dataset connected to the Repeater and filtering the results.

The Infinite Scroll example illustrates how to “load more” to the Repeater as the user scrolls. You can also adapt this to paging by changing the code to use pages and the pagination element.

Ah, thanks for all that. I’ll get working on it. :honeybee:

I’m having trouble getting this to work. Here is the relevant code:

import { local } from ‘wix-storage’ ;
import wixData from ‘wix-data’ ;
const loadLimit = 15 ;
const startLoadingNext = 10 ;
let skip = 0 ;
let finishLoad = false ;

$w . onReady ( function () {

$w ( "#listRepeater" ). data  = [] 

$w ( "#listRepeater" ). onItemReady (( $item ,  authorpages ,  index ) => { 
    $item ( "#fullName" ). text  =  authorpages . fullName ; 
    $item ( "#shortBio" ). text  =  authorpages . briefBio ; 
    $item ( "#genre1" ). text  =  authorpages . genre1 ; 
    $item ( "#genre2" ). text  =  authorpages . genre2 ; 
    $item ( "#photo" ). src  =  authorpages . photo ; 


async function loadMore1 () {

**if**  (! finishLoad  &&  $w ( '#progressImage' ). collapsed ) { 
    $w ( '#progressImage' ). expand (); 
    console . log ( "loadMore1 skip = " ,  skip ); 
    **try**  { 
        **const**  moreData  =  **await**  search1 ( loadLimit ,  skip ); 
        **const**  currData  =  $w ( '#listRepeater' ). data ; 
        $w ( '#listRepeater' ). data  =  currData . concat ( moreData ); 
        skip ++; 
        $w ( '#progressImage' ). collapse (); 
        **if**  ( moreData . length  <  loadLimit ) { 
            finishLoad  =  **true** ; 
        } 
    }  **catch**  ( err ) { 
        console . error ( err ); 
    } 
} 

}

async function search1 ( limit , skip ) {
$w ( ‘#listRepeater’ ). hide ();
$w ( ‘#searchFail’ ). hide ();
$w ( ‘#textClassics’ ). hide ();
console . log ( "search1 skip = " , skip );
try {
const results = await wixData . query ( ‘authorpages’ )
. limit ( limit )
. skip ( limit * skip )
. descending ( “likes” )
. contains ( ‘fullName’ , $w ( “#name” ). value )
. or ( wixData . query ( ‘authorpages’ )
. eq ( ‘email’ , $w ( “#email” ). value ))
. find ();
return results . items || [];
} catch ( err ) {
console . error ( err );
}
}

It comes up with no results. The console log shows it gets to search1 and skip is added to each time it goes round, but this message comes up multiple times per iteration with the IDs of 4 or 5 items repeating more or less at random:

Wix code SDK Warning: The data that was passed to data contained at least two items with the same ID: 4d0d0765-96d8-4dfa-87a4-de567e115a38. Only the first item was accepted.

It’s on this line in loadMore1
const currData = $w ( ‘#listRepeater’ ). data ;

Seems to be getting into a loop, but I can’t see why.

Sorry, I missed this code which comes after the onItemReady code I show.

// for each search type,
// loading 10th item will trigger next load of items
if ( searchType === 1 && index % startLoadingNext )
{ $w ( ‘#triggerBox’ ). onViewportEnter (() => loadMore1 ());
}
})
loadMore1 ();