Prev next rows in table to navigate between rows

App Building
1

Hi following this topic
https://community.retool.com/t/hide-table-via-css/32900/9

now i got another issue with my prev button, see attached video:

see when im in row 2 when i press again Prev icon it turns crazy like it changed to another page

i got this code for prev icon:


if ((table1.selectedDataIndex - 1) % table1.pagination.pageSize === 0 ) {
  const currentPage = table1.pagination.currentPage
  table1.setPage(currentPage - 1)
}

table1.selectPreviousRow()

next icon:

if ((table1.selectedDataIndex + 1) % table1.pagination.pageSize === 0 ) {
  const currentPage = table1.pagination.currentPage
  table1.setPage(currentPage + 1)
}

table1.selectNextRow()

and when change page:

image
image1642×418 65.9 KB

not sure what is wrong in the prev icon logic?

in addition, the next button is not working good also, is not changing page see video: Loom | Free Screen & Video Recording Software | Loom

pd: this app have edit mode and search mode, not sure if i need two diff query to db one with filter and one without

thank you

2

Are you checking anywhere if you're on the first page before setting the page to currentPage-1?

1 Like
3

no i just got those two scripts for prev and next, how it will be?

4

Hello, i have been testing, and it seems that selectPreviousRow() doesn't work if the target index is not displayed, even delaying it (always jumps to index 0).

image
image1301×525 74 KB

image
image1121×485 56.2 KB

but selectNextRow() works just fine

const selectedIndex = table1.selectedDataIndex;
const pageSize = table1.pagination.pageSize;
const currentPage = table1.pagination.currentPage;

if ((selectedIndex + 1) % pageSize == 0) {
  table1.setPage(currentPage + 1)
}

table1.selectNextRow()
1 Like
5

that means a bug? or its the standard?

6

probably a bug:

Animation

1 Like
7

I tried triggering selectPreviousRow() in a separate JS query, setting a debounce of 1000ms (1 s) after setPage() was called and still don't working

1 Like
8

woh :frowning: so i will need to change my solution to read from query directly, but then with js how i can filter? or i have to use query directly only? i need pagination as i have 50k records

9

what does your query do now - I'm expecting that it does the filtering and paging on the server and you don't load 50k records and then filter it in the table?

1 Like
10

main query:

SELECT 
  c.id, 
  c.idclave_nombre, 
  c.ubicacion, 
  c.nombres, 
  c.apellidos, 
  c.cedula, 
  c.sector, 
  c.empresa, 
  c.acreedor, 
  c.analista, 
  c.sucursal, 
  c.ps, 
  c.fecha_nacimiento, 
  c.nivel, 
  DATE_PART(
    'YEAR', 
    AGE(
      CURRENT_DATE, c.fecha_nacimiento
    )
  ) as edad, 
  c.sexo, 
  c.usuario, 
  c.notas, 
  CURRENT_DATE - CAST(c.fecha_seguimiento AS DATE) as TE 
FROM 
  tbl_clientes c 

WHERE  
 (
    {{ ! ubicacion.value }} 
    OR c.ubicacion = {{ ubicacion.value }}
  ) 

  AND (
    {{ ! nombres.value }} 
    OR c.nombres ILIKE {{ '%' + nombres.value + '%' }}
  ) 
LIMIT {{table1.pagination.pageSize}} 
OFFSET {{table1.pagination.offset}}

rowcount query:

SELECT 
  COUNT(*) as count 
FROM 
  tbl_clientes c 
WHERE  
 (
    {{ ! ubicacion.value }} 
    OR c.ubicacion = {{ ubicacion.value }}
  ) 

  AND (
    {{ ! nombres.value }} 
    OR c.nombres ILIKE {{ '%' + nombres.value + '%' }}
  )
11

Great, so the searching/filtering on those 2 fields is already in the query, as is pagination - so now you will need to have those two buttons change the selected record and page as needed.

We've already seen some of the logic for that - increment the row index by 1 unless it's the last record in which case get the next page etc

You can store that in a pagination temporary variable along with the current selected row and then access it directly from the query data in the same way as you would with a table. A table is just an array of data that's neatly formatted, after all.

so:
temporary variable "paging" to be an object with properties like the pagination component eg

{ pageSize: 10, offset: 0, currentPage: 0, currentRowIndex: 0, maxPages: 0 }

Your query can use these values instead of table.pagination etc
Your 'current row' of data can then be accessed with something like: query.data[pagination.value.currentRowIndex]

Have to say again, it feels like reinventing the wheel here :smiley: and clicking "next record" to loop through 50k records seems a little user-unfriendly to me :smiley:

1 Like
12

yeah but thats how they have it in current MS Access app, they dont loop all, what they do in that screen is, filter by values in the blue container, so filter by Location for example then they loop tru all results that gave that Location*.

image
image1303×850 61.8 KB

not sure why but they like to work like that in Access, so i need to do something alike

13

is that the hidden table?
If so, you could ignore the table and loop with query1.data[i]

1 Like
14

thats the ms access app, not sure how it works i didnt do it but if you see got all records 50k inside and they can navigate between all of them

15

i mean your Retool's table

1 Like
16

yeah i will try to use the idea of @dcartlidge , also i was thinking if theres no other alternative? at the end the client wants to be able to filter inside that app, also update add information, its that the only solution i have ? navigate all query with js?

17

i think is the best solution since selectPreviousRow() doesn't work correctly

1 Like
18

@Oscar_Ortega @dcartlidge one question as i will access my query directly, i need to remove limit and offset from query? and also i wont need rowcount?

19

any example how to navigate query instead of table?

20

this is what i have in mind on click next row:

{ pageSize: 10, offset: 0, currentPage: 0, currentRowIndex: {{currentIndex.value.currentRowIndex + 1}}, maxPages: 0 } but not sure how to get pageSize, offset, currentpage and maxpages?

@dcartlidge not sure how to do it like you said 'increment the row index by 1 unless it's the last record in which case get the next page etc'