Paging Tutorial

For situations where proper pagination is needed, paging mode will explicitly call up pages of predefined sizes like you would find in a standard datagrid. Ajax is still used to do the server communication. This can be applied to both bound and unbound data modes.

Static Paging

You can bind a data island stored on the page within the HTML to a livescrolling grid. The advantage is that with larger datasets (hundreds to thousands of rows) the grid will be faster and users will have more seamless access to the data. A more detailed explanation of static databinding can be found here.

Assuming you've already set up your page for a Grid (if you don't know how to do this, refer to this article), you can proceed by putting a grid tag somewhere on your page and set the mode to localstandard.

<ntb:grid id="PagingGrid1"
width="630"
height="200"
mode="localstandard"
datasourceid="mydata"
toolbarenabled="false">

<ntb:datasources>
<ntb:datasource id="mydata">
  <ntb:datasourcestructure
    FieldNames="ContactName|ContactEmail|JobTitle"
    Keys="ContactName"
    types="text|text|text"
    defaults="John Doe|[email protected]|Manager">
  </ntb:datasourcestructure>

  <ntb:data>
   <ntb:e xi="0" a="Tammara Farley" b="[email protected]" c="Director"> </ntb:e>
   <ntb:e xi="1" a="Dwana Barton" b="[email protected]" c="Analyst"> </ntb:e>
   <ntb:e xi="2" a="Steve Irwin" b="[email protected]" c="guide"> </ntb:e>
   
  </ntb:data>
</ntb:datasource>
</ntb:datasources>

</ntb:grid>

This grid will reference the data island with the id "mydata". This data is contained in an XML block further down in the ntb:datasources block. In ntb:datasourcestructure we define the FieldNames (like database columns), the primary key(s) in keys, and types and defaults are optional fields.

Record data is stored in the ntb:data block and the order of this data is contained in the xi field. Note: xi is not a primary key, but a row number beginning at 0. The actual fields of data corresponding to FieldNames are labeled alphabetically beginning with a="" b="" c="" and so-on. After z="" they continue on with aa="" ab="" ac="", etc.

Ajax Paging

To perform LiveScrolling on a remote dataset with Ajax we define a gethandler instead of a datasourceid. The gethandler refers to a document on the server (probably a PHP, or ASP script, or a servelet of some kind) that outputs an XML island of it's own. We also define a savehandler for saving. A more complete discussion of Ajax databinding in grid can be found here.

StartRecordIndex - Which record (ordinally) to start returning data on.
PageSize - How many records to return
SortColumn - Which is the currently sorted column (could be blank)
SortDirection - (Asc or Desc) The direction of sorting
TableId - The datatable being used (by default is _default)

Paging gethandlers and savehandlers are exactly the same as those for Livescrolling mode.

Below is an example of a databound grid tag with gethandler and savehandler.

  <ntb:grid id="PagingGrid2"
       width="630"
       height="200"
       mode="livescrolling"
       autosaveenabled="true"
       keygenerator="GetNewRecordID()"
       gethandler="load_data.asp"
       savehandler="save_data.asp"
       toolbarenabled="true">
  </ntb:grid>

Click on the following links to to read about how to make a gethandler and savehandler in different platforms:

Classic ASP: getHandler, saveHandler
PHP 4, 5+: getHandler, saveHandler
J2EE: getHandler, saveHandler
Coldfusion MX

View Printable Version

Nitobi Product Knowledgebase

Paging Tutorial

Static Paging

Ajax Paging

Related Articles

Comments: