Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision Next revision Both sides next revision | ||
|
wiki:pager [2009/12/09 16:21] linoj |
wiki:pager [2010/09/27 18:47] marcus Added that if the string stop is returned from the function then the paging will be stopped |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ====== Pager ====== | ====== Pager ====== | ||
| - | If your grids are all so small that they can display all records at the same time, then you don't need to worry about navigation. But more likely, you will want to display the available records a few at a time. And for that, you will need the Navigation Bar. | + | If your grid has only a few rows of data, then all the records will be viewable at the same time and you won't have to worry about navigating through pages of data. |
| + | |||
| + | But more likely, you will be dealing with large sets of data, and you'll want to display a small number of available records at a time. For this functionality, you will need the Navigation Bar. | ||
| <note>Pager is currently disabled for [[TreeGrid]] </note> | <note>Pager is currently disabled for [[TreeGrid]] </note> | ||
| ===== Definition ===== | ===== Definition ===== | ||
| - | The Navigation Bar, also known as the pager, is defined first in html -- normally, but not necessarily, placed so it appears at the bottom of the grid. Note that it is a <div>, not a <table>. | ||
| - | HTML definition | + | The Navigation Bar, also known as the pager, is enabled by placing a <div> right after the <table> definition in your HTML. |
| + | Note that it is a <div>, not a <table>. Then, you identify the <div> to your grid by placing the name of the div in the grid setting called "pager". | ||
| + | |||
| + | First, the HTML definition. We'll name it "gridpager": | ||
| <code html> | <code html> | ||
| Line 18: | Line 22: | ||
| ... | ... | ||
| </body> | </body> | ||
| + | |||
| + | Next, we'll identify "gridpager" to your grid: | ||
| </code> | </code> | ||
| Line 33: | Line 39: | ||
| <note>The definition of the pager in the grid can be done this way:**pager : '#gridpager'**, **pager : 'gridpager'** or **pager : jQuery('#gridpager')**. All the three methods are valid, but I recommend to use the first or second one, since the jQuery variant causes problems when we try to use Exporting and Importing modules. </note> | <note>The definition of the pager in the grid can be done this way:**pager : '#gridpager'**, **pager : 'gridpager'** or **pager : jQuery('#gridpager')**. All the three methods are valid, but I recommend to use the first or second one, since the jQuery variant causes problems when we try to use Exporting and Importing modules. </note> | ||
| + | |||
| + | |||
| The definition in jqGrid options array tell that the pager should be a part of the grid and the width of the pager will equal of the width of the grid. In this case, the pager will be placed below the body of the gird. Note that in this case the pager element can have arbitrary position in the document and it will be placed instead above the grid body. | The definition in jqGrid options array tell that the pager should be a part of the grid and the width of the pager will equal of the width of the grid. In this case, the pager will be placed below the body of the gird. Note that in this case the pager element can have arbitrary position in the document and it will be placed instead above the grid body. | ||
| - | Currently it is possible to have only one pager in the grid and this pager can be placed only above the grid body. | ||
| If you want to have custom pager you can use your own definition and not to set the pager options in the grid. | If you want to have custom pager you can use your own definition and not to set the pager options in the grid. | ||
| Line 71: | Line 78: | ||
| }); | }); | ||
| </code> | </code> | ||
| + | |||
| + | Normally, the pager placed so it appears at the bottom of the grid. A duplicate pager can also be enabled to appear at the top of the grid. | ||
| Normally when we create the pager we divide this element on three equal parts - left, center and right part. When you try to place additional information in the pager the pager try to fit the size. In case if you plan to place a lot of elements you should accordingly set the appropriate width of the grid. | Normally when we create the pager we divide this element on three equal parts - left, center and right part. When you try to place additional information in the pager the pager try to fit the size. In case if you plan to place a lot of elements you should accordingly set the appropriate width of the grid. | ||
| Line 108: | Line 117: | ||
| </script> | </script> | ||
| </code> | </code> | ||
| - | |||
| ===== Events ===== | ===== Events ===== | ||
| One event of the grid relates to the Pager: | One event of the grid relates to the Pager: | ||
| ^Event^Parameters^Description^ | ^Event^Parameters^Description^ | ||
| - | |onPaging|pgButton|This event fires after click on [page button] and before populating the data. Also works when the user enters a new page number in the page input box (and presses [Enter]) and when the number of requested records is changed via the select box. To this event we pass only one parameter //pgButton// (string) which can be - //first,last,prev,next// in case of button click, //records// in case when a number of requested rows is changed and //user// when the user change the number of the requested page.| | + | |onPaging|pgButton|This event fires after click on [page button] and before populating the data. Also works when the user enters a new page number in the page input box (and presses [Enter]) and when the number of requested records is changed via the select box. To this event we pass only one parameter //pgButton// (string) which can be - //first,last,prev,next// in case of button click, //records// in case when a number of requested rows is changed and //user// when the user change the number of the requested page. If the string //stop// is returned from the function then the paging will be stopped.| |
| + | |||
