YUI Library Examples: DataTable Control (beta): Server-side Pagination and Sorting, with Browser History Manager

DataTable Control (beta): Server-side Pagination and Sorting, with Browser History Manager

This example combines server-side pagination and sorting with the Browser History Manager for managing states.

View example in new window.

< Showing items 0 - 24 >
Loading data...

Sample Code for this Example

Data:

1{"recordsReturned":25, 
2    "totalRecords":1397, 
3    "startIndex":0, 
4    "sort":null, 
5    "dir":"asc", 
6    "records":[ 
7        {"id":"0", 
8        "name":"xmlqoyzgmykrphvyiz", 
9        "date":"13-Sep-2002", 
10        "price":"8370", 
11        "number":"8056", 
12        "address":"qdfbc", 
13        "company":"taufrid", 
14        "desc":"pppzhfhcdqcvbirw", 
15        "age":"5512", 
16        "title":"zticbcd", 
17        "phone":"hvdkltabshgakjqmfrvxo", 
18        "email":"eodnqepua", 
19        "zip":"eodnqepua", 
20        "country":"pdibxicpqipbsgnxyjumsza"}, 
21        ... 
22    ] 
23} 
view plain | print | ?

CSS:

1/* custom styles for this example */ 
2#dt-pag-nav { margin:1em; } /* custom pagination UI */ 
view plain | print | ?

Markup:

1<div id="dt-pag-nav"> 
2    <span id="prevLink"><</span> Showing items 
3    <span id="startIndex">0</span> - <span id="endIndex">24</span> 
4    <span id="ofTotal"></span> <span id="nextLink">></span> 
5</div> 
6<div id="serverpagination"></div> 
view plain | print | ?

JavaScript:

1YAHOO.util.Event.addListener(window, "load", function() { 
2    YAHOO.example.ServerIntegration = new function() { 
3        // Function to return initial config values, 
4        // which could be the default set, or parsed from a bookmarked state 
5        this.getInitialConfig = function() { 
6            // Parse bookmarked state 
7            var tmpHash = {}; 
8            if(location.hash.substring(1).length > 0) { 
9                var sBookmark = location.hash.substring(1); 
10                sBookmark = sBookmark.substring(sBookmark.indexOf("=")+1); 
11                var aPairs = sBookmark.split("&"); 
12                for(var i=0; i<aPairs.length; i++) { 
13                    var sPair = aPairs[i]; 
14                    if(sPair.indexOf("=") > 0) { 
15                        var n = sPair.indexOf("="); 
16                        var sParam = aPairs[i].substring(0,n); 
17                        var sValue = aPairs[i].substring(n+1); 
18                        tmpHash[sParam] = sValue; 
19                    } 
20                } 
21            } 
22 
23            // Validate values 
24 
25            var newResults = parseInt(tmpHash["results"],10); 
26            if(!YAHOO.lang.isNumber(newResults)) { 
27                newResults = 25; 
28            } 
29 
30            var newStart = parseInt(tmpHash["startIndex"],10); 
31            if(!YAHOO.lang.isValue(newStart)) { 
32                 newStart = 0; 
33            } 
34 
35            var newSort = tmpHash["sort"]; 
36            if(!YAHOO.lang.isValue(newSort)) { 
37                newSort = "id"; 
38            } 
39 
40            var newDir = tmpHash["dir"]; 
41            if(!YAHOO.lang.isValue(newDir)) { 
42                newDir = "asc"; 
43            } 
44 
45            return { 
46                paginator: { 
47                    rowsThisPage: newResults, 
48                    startRecordIndex: newStart 
49                }, 
50                sortedBy: { 
51                    key: newSort, 
52                    dir: newDir 
53                }, 
54                initialRequest: "results="+newResults+"&startIndex="+newStart+"&sort="+newSort+"&dir="+newDir 
55            }; 
56        }; 
57 
58        this.initialConfig = this.getInitialConfig(); 
59        this.myBookmarkedState = YAHOO.util.History.getBookmarkedState("myDataTable"); 
60        this.myInitialState = this.myBookmarkedState || 
61                ("results=" + this.initialConfig.paginator.rowsThisPage + 
62                "&startIndex=" + this.initialConfig.paginator.startRecordIndex + 
63                "&sort=" + this.initialConfig.sortedBy.key + 
64                "&dir=" + this.initialConfig.sortedBy.dir); 
65        this.myBookmarkHandler = function(newBookmark) { 
66            var oSelf = YAHOO.example.ServerIntegration; 
67            oSelf.myDataSource.sendRequest(newBookmark, oSelf.myDataTable.onDataReturnInitializeTable, oSelf.myDataTable); 
68        }; 
69        YAHOO.util.History.register("myDataTable", this.myInitialState, this.myBookmarkHandler); 
70        YAHOO.util.History.initialize(); 
71        YAHOO.util.History.onLoadEvent.subscribe(function() { 
72            // Column definitions 
73            var myColumnDefs = [ 
74                {key:"id", label:"ID", sortable:true}, 
75                {key:"name", label:"Name", sortable:true}, 
76                {key:"date", label:"Date", sortable:true}, 
77                {key:"price", label:"Price", sortable:true}, 
78                {key:"number", label:"Number", sortable:true}, 
79                {key:"address", label:"Address", sortable:true}, 
80                {key:"company", label:"Company", sortable:true}, 
81                {key:"desc", label:"Description", sortable:true}, 
82                {key:"age", label:"Age", sortable:true}, 
83                {key:"title", label:"Title", sortable:true}, 
84                {key:"phone", label:"Phone", sortable:true}, 
85                {key:"email", label:"Email", sortable:true}, 
86                {key:"zip", label:"Zip", sortable:true}, 
87                {key:"country", label:"Country", sortable:true} 
88            ]; 
89 
90            // Instantiate DataSource 
91            this.myDataSource = new YAHOO.util.DataSource("assets/php/json_proxy.php?"); 
92            this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON; 
93            this.myDataSource.responseSchema = { 
94                resultsList: "records", 
95                fields: ["id","name","date","price","number","address","company","desc","age","title","phone","email","zip","country"] 
96            }; 
97 
98            // Instantiate DataTable 
99            this.myDataTable = new YAHOO.widget.DataTable("serverintegration", myColumnDefs, 
100                    this.myDataSource, this.initialConfig); 
101 
102            // Custom code to parse the raw server data for Paginator values and page links and sort UI 
103            this.myDataSource.doBeforeCallback = function(oRequest, oRawResponse, oParsedResponse) { 
104                var oSelf = YAHOO.example.ServerIntegration; 
105                var oDataTable = oSelf.myDataTable; 
106 
107                var oRawResponse = oRawResponse.parseJSON(); //JSON.parse(oRawResponse); 
108                var recordsReturned = oRawResponse.recordsReturned; 
109                var startIndex = oRawResponse.startIndex; 
110                var endIndex = startIndex + recordsReturned -1; 
111                var totalRecords = oRawResponse.totalRecords; 
112                var sort = oRawResponse.sort; 
113                var dir = oRawResponse.dir; 
114 
115                // Update the DataTable Paginator with new values 
116                var newPag = { 
117                    recordsReturned: recordsReturned, 
118                    startRecordIndex: startIndex, 
119                    endIndex: endIndex, 
120                    totalResults: totalRecords 
121                } 
122                oDataTable.updatePaginator(newPag); 
123 
124                // Update the links UI 
125                YAHOO.util.Dom.get("prevLink").innerHTML = (startIndex === 0) ? "<" : 
126                        "<a href=\"#previous\" alt=\"Show previous items\"><</a>" ; 
127                YAHOO.util.Dom.get("nextLink").innerHTML = 
128                        (endIndex >= totalRecords) ? ">" : 
129                        "<a href=\"#next\" alt=\"Show next items\">></a>"; 
130                YAHOO.util.Dom.get("startIndex").innerHTML = startIndex; 
131                YAHOO.util.Dom.get("endIndex").innerHTML = endIndex; 
132                YAHOO.util.Dom.get("ofTotal").innerHTML = " of " + totalRecords; 
133 
134                // Update the config sortedBy with new values 
135                var newSortedBy = { 
136                    key: sort, 
137                    dir: dir 
138                } 
139                oDataTable.set("sortedBy", newSortedBy); 
140 
141                return oParsedResponse; 
142            }; 
143 
144            // Hook up custom pagination 
145            this.getPage = function(nStartRecordIndex, nResults) { 
146                // If a new value is not passed in 
147                // use the old value 
148                if(!YAHOO.lang.isValue(nResults)) { 
149                    nResults = this.myDataTable.get("paginator").totalRecords; 
150                } 
151                // Invalid value 
152                if(!YAHOO.lang.isValue(nStartRecordIndex)) { 
153                    return; 
154                } 
155 
156                var oSortedBy = this.myDataTable.get("sortedBy"); 
157                var newBookmark = "startIndex=" + nStartRecordIndex + "&results=" + nResults + 
158                        "&sort=" + oSortedBy.key + "&dir=" + oSortedBy.dir ; 
159                YAHOO.util.History.navigate("myDataTable", newBookmark); 
160            }; 
161            this.getPreviousPage = function(e) { 
162                YAHOO.util.Event.stopEvent(e); 
163                // Already at first page 
164                if(this.myDataTable.get("paginator").startRecordIndex === 0) { 
165                    return; 
166                } 
167                var newStartRecordIndex = this.myDataTable.get("paginator").startRecordIndex - this.myDataTable.get("paginator").rowsThisPage; 
168                this.getPage(newStartRecordIndex); 
169            }; 
170            this.getNextPage = function(e) { 
171                YAHOO.util.Event.stopEvent(e); 
172                // Already at last page 
173                if(this.myDataTable.get("paginator").startRecordIndex + 
174                        this.myDataTable.get("paginator").rowsThispage >= 
175                        this.myDataTable.get("paginator").totalRecords) { 
176                    return; 
177                } 
178                var newStartRecordIndex = (this.myDataTable.get("paginator").startRecordIndex + this.myDataTable.get("paginator").rowsThisPage); 
179                this.getPage(newStartRecordIndex); 
180            }; 
181            YAHOO.util.Event.addListener(YAHOO.util.Dom.get("prevLink"), "click", this.getPreviousPage, this, true); 
182            YAHOO.util.Event.addListener(YAHOO.util.Dom.get("nextLink"), "click", this.getNextPage, this, true); 
183 
184            // Override function for custom sorting 
185            this.myDataTable.sortColumn = function(oColumn) { 
186                // Which direction 
187                var sDir = "asc"; 
188                // Already sorted? 
189                if(oColumn.key === this.get("sortedBy").key) { 
190                    sDir = (this.get("sortedBy").dir === "asc") ? 
191                            "desc" : "asc"; 
192                } 
193 
194                var oPag = this.get("paginator"); 
195                var newBookmark = "sort=" + oColumn.key + "&dir=" + sDir + "&results=" + oPag.rowsThisPage + "&startIndex=0"; 
196                YAHOO.util.History.navigate("myDataTable", newBookmark); 
197            }; 
198        }, this, true); 
199    }; 
200}); 
view plain | print | ?

YUI Logger Output:

Logger Console

INFO 0ms (+0) 1:56:13 PM: 
global: 
Logger initialized

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

More DataTable Control (beta) Resources:

Copyright © 2007 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings