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: 2779
Reply #2739 on : Fri August 30, 2013, 11:40:38
Posts: 2779
Reply #2738 on : Sun September 08, 2013, 06:36:58
Posts: 2779
Reply #2737 on : Sun September 08, 2013, 07:24:27
Posts: 2779
Reply #2736 on : Sun September 08, 2013, 21:19:25
Posts: 2779
Reply #2735 on : Mon September 09, 2013, 00:01:10
Posts: 2779
Reply #2734 on : Mon September 09, 2013, 07:13:34
Posts: 2779
Reply #2733 on : Mon September 09, 2013, 10:06:19
Posts: 2779
Reply #2732 on : Mon September 09, 2013, 11:33:39
Posts: 2779
Reply #2731 on : Tue September 10, 2013, 03:12:35
Posts: 2779
Reply #2740 on : Tue August 27, 2013, 20:40:58