Next and Prev functions CODED for queries. Help please!!

Ask the community
,
1

Dear all… I need help because I cannot find anything on the forum or the API.

I am coding, so no Editor X elements or datasets. I am working with queries on a database, query instead of filter because I want to save the results on variables. The results are displayed on a repeater. No problem until this point.

I need to understand how to use the next() and prev() functions to add buttons to navigate pages of a result. I understand those are the functions to use, but no example available puts them in the context of activating the function when clicking on a button… when and how do I do that?

Please help it’s two days I am trying to figure that out and I already went through the API 10 thousand times.
#query #database #next #prev #pagination #button velo

This is my code. Again, the query and display work, as well as the counter that I coded. But I have no clue where to say “I am clicking on this button. reload the new 5 results”.

wixData . query ( “MitoCarePublications” )
. descending ( “year” )
. limit ( 5 )
. contains ( “authors” , “tigano” )
. find ()
. then ( ( results ) => {
if ( results . items . length > 0 ) {
$w ( “#repeater1” ). data = results . items ;
let resultspages = results . pageSize
let items = results . items ;
let firstresult = items [ 0 ]
let firsttitle = firstresult . title
let firstyear = firstresult . year
let resultsnumber = results . totalCount
if ( resultsnumber > 1 ) {
$w ( ‘#counter’ ). text = ${ resultsnumber } results were found. ;
$w ( “#searchGIF” ). hide ();
$w ( ‘#counter’ ). show ();
}
if ( resultsnumber > resultspages ) {
$w ( “#nextpage” ). show ();
$w ( “#nextpage” ). onClick ( Event )

                    $w ( '#counter' ). show (); 
                } 
                **if**  ( resultsnumber  ===  1 ) { 
                    $w ( '#counter' ). text  =  ` ${ resultsnumber }  result was found.` ; 
                    $w ( "#searchGIF" ). hide (); 
                    $w ( '#counter' ). show (); 
                } 
                **if**  ( resultsnumber  ===  0 ) { 
                    $w ( '#counter' ). text  =  "No result found!" ; 
                    $w ( "#searchGIF" ). hide (); 
                    $w ( '#counter' ). show (); 
                } 
            console . log ( firsttitle ) 
            console . log ( firstyear ) 
        }    **else**  { 
            console . log ( "noresults" )     
        $w ( "#searchGIF" ). hide (); 
        } 
    })

Thank you!

2

Why not using DATASET ?

3

here a little bit more details on why I converted to a query in the first place! Bear in mind I am a novice at javascript and Velo, so every block is a painstaking operation for me :wink:

4

because that would require me to use filter instead of query, and I couldn’t find a way to save the filtering results to a variable that I can use for different things then… or at least I am oblivious on how to do it…

5

@mitocarecenter

I will just give you an idea not a solution…

import wixData from 'wix-data';

//--------- [USER-INTERFACE] -----------------------------------------------
const dbDataLimit = 5;
const dbSkipStep = 5 ;
const descSort = "year";
const DATABASE = "MitoCarePublications";
const DATAFIELD = "authors";
const VALUE = "tigano";
const REPEATER = "#repeater1";
//--------- [USER-INTERFACE] -----------------------------------------------

$w.onReady(()=>{
    let STEP
    $w('#btnNext').onClick(()=>{
        STEP=STEP+dbSkipStep; console.log(STEP);
        myFunction(STEP);
    });
    $w('#btnPrevious').onClick(()=>{
        myFunction(STEP)
        STEP=STEP-dbSkipStep; console.log(STEP);
    });
});


function myFunction(STEP){
    wixData.query(DATABASE)
    .descending(descSort)
    .contains(DATAFIELD, VALUE)
    .skip(STEP)             // <---- ??? What do this codeline do? 
    .limit(dbDataLimit)     // <---- ??? What do this codeline do?
    .find()
    .then( (results) => {
        if(results.items.length > 0) {
            $w(REPEATER).data = results.items;
            let resultspages = results.pageSize
            let items = results.items;
            let firstresult = items[0]
            let firsttitle = firstresult.title
            let firstyear = firstresult.year
            let resultsnumber = results.totalCount
                if (resultsnumber > 1) {
                    $w('#counter').text = `${resultsnumber} results were found.`;
                    $w("#searchGIF").hide();
                    $w('#counter').show();
                }
                if (resultsnumber > resultspages) {$w("#nextpage, #counter").show();}
                if (resultsnumber===1) {
                    $w('#counter').text = `${resultsnumber} result was found.`;
                    $w("#searchGIF").hide();
                    $w('#counter').show();
                }
                if (resultsnumber === 0) {
                    $w('#counter').text = "No result found!";
                    $w("#searchGIF").hide();
                    $w('#counter').show();
                }
            console.log(firsttitle); console.log(firstyear);
        }   
        else { console.log("noresults"); $w("#searchGIF").hide();}
    })
}

This is surely not the best way of how to achieve your wished function (just an idea 4 you, how you could solve it).

You will have to improve it a lot, so that you have a good and fast working function at the end.

6

@russian-dima thank you so much! I am metabolizing you reply… actually I didn’t got a notification for that, so sorry for not looking at this earlier. I think I get solution that you are giving me…
What about the hasnext() and next() functions? In the API those were defined as the functions that allow to ask if you results have a next page and to actually get the next page. But I never figured how to use those and if they are actually the right ones for my problem!