List Control - Pagination - Navigation Buttons

UX Component

In this document and accompanying video we will demonstrate different methods of defining pagination buttons for a List Control in a UX Component.  List navigation can be done by page or by record.



Watch Video


In our example we have a simple List Control that is based on the Northwind customer table.  We have turned on pagination, so currently only the first page of records are displayed.


(Note: Northwind is a sample Microsoft Access database that is shipped with Alpha Anywhere.  It can be found in the 'MDBFiles' folder in the folder where Alpha Anywhere is installed):




To see how this is done click on the Design tab, then List properties:




When the List Builder window opens we see that Paginate data has been turned on, Page size has been set to 5 rows, and the Pagination method has been set for NavigationButtons:




Since we chose NavigatonButtons as our method, we need to go ahead and add those buttons to our list.  We can choose from a list of pre-defined controls:



The List Control window will open asking which list we want to be talking to.  There could be more than one list, but in our example we have only list, so we choose that and click OK:





The next prompt asks which pagination method we want to use.  We can paginate by page (Navigate by page of records), which means each time we press 'next' or 'previous' we will move forward one page of records at a time.  Or we can navigate by record (Navigate one record at a time), which means we move forward record by record.  When we get to the end of one page of records, 'next' would bring us to the first record on the next page, and 'previous' would bring us to the last record on the previous page:




Click onClick under Javascript to see the Javascript that is executed with the Navigate one record at a time method:




It is calling the list navigate record method:




In contrast, the Javascript executed with the Navigate by page of records method simply calls the list navigate method: