YUI Library Examples: DataTable Control (beta): Server-side Sorting

DataTable Control (beta): Server-side Sorting

This example integrates with server-side logic for customized sorting.

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/* No custom CSS. */ 
view plain | print | ?

Markup:

1<div id="serversorting"></div> 
view plain | print | ?

JavaScript:

1YAHOO.util.Event.addListener(window, "load", function() { 
2    YAHOO.example.ServerPagination = new function() { 
3        // Column definitions 
4        var myColumnDefs = [ 
5            {key:"id", label:"ID"}, 
6            {key:"name", label:"Name"}, 
7            {key:"date", label:"Date"}, 
8            {key:"price", label:"Price"}, 
9            {key:"number", label:"Number"}, 
10            {key:"address", label:"Address"}, 
11            {key:"company", label:"Company"}, 
12            {key:"desc", label:"Description"}, 
13            {key:"age", label:"Age"}, 
14            {key:"title", label:"Title"}, 
15            {key:"phone", label:"Phone"}, 
16            {key:"email", label:"Email"}, 
17            {key:"zip", label:"Zip"}, 
18            {key:"country", label:"Country"} 
19        ]; 
20 
21        // DataSource instance 
22        this.myDataSource = new YAHOO.util.DataSource("assets/php/json_proxy.php?"); 
23        this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON; 
24        this.myDataSource.responseSchema = { 
25            resultsList: "records", 
26            fields: ["id","name","date","price","number","address","company","desc","age","title","phone","email","zip","country"] 
27        }; 
28 
29        // DataTable instance 
30        var oConfigs = { 
31            initialRequest: "startIndex=0&results=25" // Initial values 
32        }; 
33        this.myDataTable = new YAHOO.widget.DataTable("serverpagination", myColumnDefs, 
34                this.myDataSource, oConfigs); 
35 
36        // Custom code to parse the raw server data for Paginator values and page links 
37        this.myDataSource.doBeforeCallback = function(oRequest, oRawResponse, oParsedResponse) { 
38            var oSelf = YAHOO.example.ServerPagination; 
39            var oDataTable = oSelf.myDataTable; 
40 
41            // Get Paginator values 
42            var oRawResponse = oRawResponse.parseJSON(); //JSON.parse(oRawResponse); // Parse the JSON data 
43            var recordsReturned = oRawResponse.recordsReturned; // How many records this page 
44            var startIndex = oRawResponse.startIndex; // Start record index this page 
45            var endIndex = startIndex + recordsReturned -1; // End record index this page 
46            var totalRecords = oRawResponse.totalRecords; // Total records all pages 
47 
48            // Update the DataTable Paginator with new values 
49            var newPag = { 
50                recordsReturned: recordsReturned, 
51                startRecordIndex: startIndex, 
52                endIndex: endIndex, 
53                totalResults: totalRecords 
54            } 
55            oDataTable.updatePaginator(newPag); 
56 
57            // Update the links UI 
58            YAHOO.util.Dom.get("prevLink").innerHTML = (startIndex === 0) ? "<" : 
59                    "<a href=\"#previous\" alt=\"Show previous items\"><</a>" ; 
60            YAHOO.util.Dom.get("nextLink").innerHTML = 
61                    (endIndex >= totalRecords) ? ">" : 
62                    "<a href=\"#next\" alt=\"Show next items\">></a>"; 
63            YAHOO.util.Dom.get("startIndex").innerHTML = startIndex; 
64            YAHOO.util.Dom.get("endIndex").innerHTML = endIndex; 
65            YAHOO.util.Dom.get("ofTotal").innerHTML = " of " + totalRecords; 
66 
67            // Let the DataSource parse the rest of the response 
68            return oParsedResponse; 
69        }; 
70 
71        // Hook up custom pagination 
72        this.getPage = function(nStartRecordIndex, nResults) { 
73            // If a new value is not passed in 
74            // use the old value 
75            if(!YAHOO.lang.isValue(nResults)) { 
76                nResults = this.myDataTable.get("paginator").totalRecords; 
77            } 
78            // Invalid value 
79            if(!YAHOO.lang.isValue(nStartRecordIndex)) { 
80                return; 
81            } 
82            var newRequest = "startIndex=" + nStartRecordIndex + "&results=" + nResults; 
83            this.myDataSource.sendRequest(newRequest, this.myDataTable.onDataReturnInitializeTable, this.myDataTable); 
84        }; 
85        this.getPreviousPage = function(e) { 
86            YAHOO.util.Event.stopEvent(e); 
87            // Already at first page 
88            if(this.myDataTable.get("paginator").startRecordIndex === 0) { 
89                return; 
90            } 
91            var newStartRecordIndex = this.myDataTable.get("paginator").startRecordIndex - this.myDataTable.get("paginator").rowsThisPage; 
92            this.getPage(newStartRecordIndex); 
93        }; 
94        this.getNextPage = function(e) { 
95            YAHOO.util.Event.stopEvent(e); 
96            // Already at last page 
97            if(this.myDataTable.get("paginator").startRecordIndex + 
98                    this.myDataTable.get("paginator").rowsThispage >= 
99                    this.myDataTable.get("paginator").totalRecords) { 
100                return; 
101            } 
102            var newStartRecordIndex = (this.myDataTable.get("paginator").startRecordIndex + this.myDataTable.get("paginator").rowsThisPage); 
103            this.getPage(newStartRecordIndex); 
104        }; 
105        YAHOO.util.Event.addListener(YAHOO.util.Dom.get("prevLink"), "click", this.getPreviousPage, this, true); 
106        YAHOO.util.Event.addListener(YAHOO.util.Dom.get("nextLink"), "click", this.getNextPage, this, true); 
107    }; 
108}); 
view plain | print | ?

More DataTable Control (beta) Resources:

Copyright © 2007 Yahoo! Inc. All rights reserved.

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