If you are looking for a way to quickly add a pager to your web app and you don't want to write several lines of code then look no further.
The new Pager Widget is exactly what you're looking for. It's simple and easy to use. Just follow the steps below and you will be up and running in no time:
Step 1: Download and extract the Pager Widget zip file
Step 2: Copy the pager.php file to the raxan/ui/widgets folder
Step 3: Add the following code to your html code
<div id="pager1"
xt-ui="Pager"
xt-ui-pagerSize="6"
xt-ui-totalPages="50"
xt-ui-itemClass="rax-glossy rax-active-pal"></div>
Step 4: Add the following code to you web page or css theme:
<style type="text/css">
.rax-pager a {
width:25px;
height:20px;
display:inline-block !important;
display:inline; /* for ie 6 */
line-height: 20px;
text-align: center;
margin: 0 2px;
vertical-align: middle;
border: solid 1px #ccc;
}
</style>
Step 5: Add the following code to your Page Controller Class
<?php
Raxan::loadWidget('pager');
?>
Step 6: View the page within the browser and you should be the Pager Widget
To listen to the pagechange event add the following attribute to your pager element:
xt-bind="pagechange,updateDisplay"
Then add the following event code to your page controller class:
<?php
public function updateDisplay($e,$page) {
$this->append("You have selected Page # ".$page);
}
?>
There are lots of way you can customize the pager widget so be sure to check out the available options.
See it in Action:
DEMO
DOWNLOAD
Widget Properties
| Name | Description | Default Value |
| Properties | ||
| currentPage | Current selected page | 1 |
| totalPages | Total number of pages | 10 |
| pagerSize | Number of pages to shown on pager. | 5 |
| truncateSize | Number of pages to truncate | 0 |
| truncateOffset | Pager truncate offset | 0 |
| delimiter | Delimiter to be used when rendering page items | |
| showPrevNext | Shows the Next and Previous buttons | 0 |
| baseClass | Main css class for the widget | rax-pager |
| itemClass | CSS class to be assigned to a page item | rax-inactive-pal |
| selectedItemClass | CSS Class to be assigned to the selected page item | rax-selected-pal |
| prevNextClass | CSS class to be assigned to the Next and Previous buttons | rax-inactive-pal |
| enableAjaxMode | Enable Ajax Mode | 0 |
| Methods | ||
| Events | ||
| pagechange | Page Change Event. Event Handler Syntax: function($e,$page) |
Posts: 2780
Reply #1 on : Tue May 16, 2023, 01:47:14