Creating Record Paging Buttons

klaw (@klaw)

10631

0

3

About This Space

Expanded version of the Grid template to add additional paging buttons and modify how the data is supplied to the Grid widget.


Last updated on March 19, 2020

Public Permissions:   View   Open/Fork   Run   Comment  

Paging Buttons

This example was built using the Loading a Grid Template.

I modified the grid to instead be database driven and to not use the replace records api.

I then added the buttons to the side of the grid that will page the grid up and down.

The buttons themselves query the DOM looking for the elements that have the CSS class of the paging controls and then click that item.

This solution has some limitations. Namely, the grid widget must have the paging bar property enabled. Addtionally, this also means that you cannot have a second grid on this screen as the the current dom query selector only selects the FIRST element on the screen that contains that CSS class.

I made a small edit afterwards to add the page number at the bottom of the grid and then used some JavaScript to show how many pages total are in the grid.

This example is locked for editing, but if you want to create your own sandbox that is a copy of this example, simply use the fork option.

If you have any questions about this example, please reach out on the discussion forum (http://discuss.noderun.com/login), as I don't plan to monitor comments on this space.

Be the first to comment:      

Comments

Write Preview Markdown: bold italic code link
Post

More Spaces By klaw (@klaw)

Filters:

Popular Recent

Displaying information in grids is fundamental to developing applications. This demo application displays a list of products in a grid.

5380

0

0

A simple Rich Display app that shows how to focus a widget via JavaScript

7337

0

0

A Rich Display File application that stored the focus in a hidden field and uses that field to apply focus when the screen is re-drawn.

8690

0

2

A simple app to be called from RPG. It leverages the node-isbn package to resolve ISBN numbers and get the book title

5387

0

0

5806

0

0

Empty template with the basics set up for a quick display.

5797

0

0

Displaying information in grids is fundamental to developing applications. This demo application displays a list of products in a grid.

6002

0

0

Displaying information in grids is fundamental to developing applications. This demo application displays a list of products in a grid.

6357

0

0

Displaying information in grids is fundamental to developing applications. This demo application displays a list of products in a grid.

4759

0

0

An application to test the hardware failure in my mouse.

3667

0

0

A simple dashboard example that uses responsive design

4303

0

0

A demo of how to build and consume Web Services with and without parameters

6078

0

0