how to change pagination to first page in Velo on a wix table

Ask the community
,
1

I found a bug with the Wix table pagination. I have try the refresh() function with no result.

Here is the step:
1- load page
2- the table loaded page 1 of 2 pages
3- go the the next page of the table (2 of 2 pages)
4- change a combo box value that is used to filter the content of that table.
5- There is only 1 page of data to show in the table for that new combo value.
6- The pagination seem to stay at page 2, but does not exists for the new combo value
7- It shows a blank table with no more pagination bar

939×460 9.04 KB

I am looking at moving to first page whenever the filter is changing on the table. How can I do this in Velo.

3 Likes
2

Problem still existing?

3

yes

4

@youge Do you use code? If so, please add it in a good formatted code-block.

5

import wixData from “wix-data” ;
import wixLocation from ‘wix-location’ ;
import { deleteParam } from ‘backend/projectSQL.jsw’ ;
import { insertParams } from ‘backend/projectSQL.jsw’ ;

let tablSelectID ;

/* API Reference: Introduction - Velo API Reference - Wix.com
// “Hello, World!” Example: Velo Learning Center
*/
$w . onReady ( function () {
$w ( “#dataset6” ). onReady (() => {
$w(‘#dropdown1’).value);
$w ( “#dataset6” ). setFilter ( wixData . filter ()
. eq ( “statusRequete” , $w ( ‘#dropdown1’ ). value ));
});
});

async function createParam () {
const toInsert = {
Xtitle : “ProjectSelection” ,
Xparams : tablSelectID
};
try {
insertParams ( toInsert );
// await fetchData();
} catch ( error ) {
console . error ( error );
}
}

async function selectionParam () {
//export function sql(sqlStr: String);
let myJSON = null ;

**try**  { 
    deleteParam ( "ProjectSelection" ); 
}  catch  ( error ) { 
    console . error ( error ); 
    console . log ( "ERROR ERROR delete Param " ); 
} 

**try**  { 
    createParam (); 
}  catch  ( error ) { 
    console . error ( error ); 
    console . log ( "ERROR ERROR insert Param " ); 
}

}

export function dropdown1_change ( event ) {
let newFilter = wixData . filter ();
newFilter = newFilter . contains ( ‘statusRequete’ , $w ( ‘#dropdown1’ ). value );
$w ( “#table1” ). refresh ();
$w ( ‘#dataset6’ ). setFilter ( newFilter );

}

export function table1_dblClick ( event ) {
let myJSON = null ;
let res = selectionParam ();
wixLocation . to ( “/blank” + “?&ProjectName=” + tablSelectID );
}

export function table1_rowSelect ( event ) {
let rowData = event.rowData ;
let myJSON = null ;
myJSON = JSON . stringify ( rowData );
tablSelectID = rowData.projectName ;
}

export function dataset6_currentIndexChanged () {
let itemData = $w ( “#dataset6” ). getCurrentItem ();
let myJSON = null ;
myJSON = JSON . stringify ( itemData );
}

export function button1_click ( event ) {
let res = selectionParam ();
wixLocation . to ( “/participantdisplay” + “?&ProjectName=” + tablSelectID );
}

6

Since you are already working with DATASETs, it should be an easy task…
https://www.wix.com/velo/reference/wix-dataset/dataset/nextpage
https://www.wix.com/velo/reference/wix-dataset/dataset/previouspage

Also you have the ability to check if a previous or next page existing…
https://www.wix.com/velo/reference/wix-dataset/dataset/hasnextpage
https://www.wix.com/velo/reference/wix-dataset/dataset/haspreviouspage

You do not switch the pages on table, instead you are switching them on your dataset and the table just show-up the results.

7

@youge did you ever solve it? I have the exact same problem :frowning:

8

try something like that:

export async function dropdown1_change ( event ) {
let newFilter = await wixData . filter ();
newFilter = newFilter . contains ( ‘statusRequete’ , $w ( ‘#dropdown1’ ). value );
$w ( “#table1” ). refresh ();
$w ( ‘#dataset6’ ). setFilter ( newFilter );

}

9

I was having the same problem, but I’m not using a dataset (I’m filling the table programmatically). The solution was:

In the onChange handler of the combo box change the type of pagination of the table, something like:
$w(“#table1”).pagination = {“type”: “normal”, “rowsPerPage”: 10};

Then, when you clear the combo box to restore the full table restore the pagination type:
$w(“#table1”).pagination = {“type”: “pagination”, “rowsPerPage”: 10};