This example combines server-side pagination and sorting with the Browser History Manager for managing states.
This example contacts a server side script to get the records appropriate for display in the DataTable according to the requested sort order and page. Additionally, each change of page or sort order will be added to the Browser History Manager, allowing bookmarking and the use of the browser's back/forward buttons to navigate through states of the DataTable.
The server-side script delivering the DataTable's records will send the data in the following JSON format:
The Browser History Manager markup requires an iframe to support IE6. This is hidden per the recommendation.
To inject the Browser History Manager into DataTable pagination and sorting, we need to create a few custom functions and insert them into the normal flow of operations. Here's a diagram of how the code below will operate (note the methods in floating boxes are our custom functions):
The Browser History Manager remembers "states". For this example, we'll use the query string sent to the server script as the state indicator. First we create a couple functions to generate and parse the query/state string, then set up the
onStateChange function for the BHM to use when calls to
History.navigate(...) are made.
To facilitate the Browser History Manager remembering pagination and sorting states, we'll need to use custom pagination and sorting handlers. Each will generate a new state and simply call the BHM's
navigate method. The
onStateChange handler will take over from there.
Finally, we create the DataTable instance and the supporting class instances in the History Manager's
onReady handler. This guarantees that whether users arrive at the page fresh, from a bookmark, or from navigating via the browser's back/forward buttons, the DataTable will display the appropriate state.
Note the DataSource is configured with a number of
metaFields, which are processed by the DataTable to automatically update sorting and pagination information. See the note on magic meta in the DataTable docs for more information.
Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.
All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.