Prev next rows in table to navigate between rows

App Building
21

Hello, i got a basic functional for your use case.

is this what you are looking for?

Note: table component is just visual, App doesn't use table at all

Animation
Dummy App.json (28.9 KB)

1 Like
22

Works good but my concern is my query have pagination limit and offset right now with table server side pagination , how i achieve that without table and control when to go to next page of results

23

I didn't use the table in any way

image
image
image

image
image635×505 35.4 KB

2 Likes
24

You'd still need the pagination in your query and the recordcount
The total number of pages is the recordcount divided by the pageSize (you'll need this if they try to scroll past the last record of the last page)

In your query, Limit is your pageSize. Offset is the number of records to skip, ie the number of the page you're currently on * the pageSize

Your next/prev buttons are adding or removing 1 from the current record index

  • If that new number is more than the last record on this page (ie offset + pagesize) then you need to load the next page by updating the offset and rerunning the query
  • If that new number is less than the current offset then we're going back a page so you need to load the last page by updating the offset and rerunnning the query
  • If the new number is neither of those then we're navigating within the current page so just add or remove one from the current record index

The pagination component does all this for you in the background

1 Like
25

i made the @Oscar_Ortega solution but not working well with pagination:

if (currentIndex.value > pageSize.value - 1) {
  currentPage.setValue(currentPage.value + 1)
  currentIndex.setValue(0)
} else if (currentIndex.value < 0) {
  currentPage.setValue(currentPage.value - 1)
  currentIndex.setValue(pageSize.value - 1)
}

this is the script for prev and next row

image
image1189×818 112 KB

but its not changing page, its looping first page

26

Next button config:
image

1 Like
27

i got same code, but i have my query manually trigger, not when input change (as in the same app i use it to save update records)

image
image1494×746 122 KB

28

Adding query.trigger() in both conditionals should work

1 Like
29

yeah i tried that, but see what is happening, what im thinking is i need another query without filter?

my app also filter in the same query, as user may switch filter and navigate tru rows, but also they can update add new information.

So when switch is == true then i enable the row navigation, but also, user may filter by location, name, id, etc all inputs in the blue container (kinda complex app)

30

any idea? @Oscar_Ortega

31

Catching up on this thread now! @agaitan026 would you be able to make it into office hours today? Could be helpful to show us what’s going on live! :slight_smile:

1 Like
32

didnt make it :frowning: but need help yet @Oscar_Ortega @dcartlidge @victoria , as im using server side pagination