YUI Library Examples: DataTable Control (beta): Server-side 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:


1	YAHOO.util.Event.addListener(window, "load", function() {
2	YAHOO.example.ServerSorting = new function() {
3	// Column definitions
4	var myColumnDefs = [
5	{key:"id", label:"ID", sortable:true},
6	{key:"name", label:"Name", sortable:true},
7	{key:"date", label:"Date", sortable:true},
8	{key:"price", label:"Price", sortable:true},
9	{key:"number", label:"Number", sortable:true}
10	];
11
12	// DataSource instance
13	this.myDataSource = new YAHOO.util.DataSource("assets/php/json_proxy.php?");
14	this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
15	this.myDataSource.responseSchema = {
16	resultsList: "records",
17	fields: ["id","name","date","price","number"]
18	};
19
20	// DataTable instance
21	var oConfigs = {
22	initialRequest: "sort=id&dir=asc&results=100", // Server parameters for initial request
23	sortedBy: {key:"id", dir:YAHOO.widget.DataTable.CLASS_ASC}, // Set up initial column headers UI
24	renderLoopSize: 25 // Bump up to account for large number of rows to display
25	};
26	this.myDataTable = new YAHOO.widget.DataTable("serversorting", myColumnDefs,
27	this.myDataSource, oConfigs);
28
29	// Override function for custom server-side sorting
30	this.myDataTable.sortColumn = function(oColumn) {
31	// Default ascending
32	var sDir = "asc"
33
34	// If already sorted, sort in opposite direction
35	if(oColumn.key === this.get("sortedBy").key) {
36	sDir = (this.get("sortedBy").dir === YAHOO.widget.DataTable.CLASS_ASC) ?
37	"desc" : "asc";
38	}
39
40	// Pass in sort values to server request
41	var newRequest = "sort=" + oColumn.key + "&dir=" + sDir + "&results=100&startIndex=0";
42
43	// Create callback for data request
44	var oCallback = {
45	success: this.onDataReturnInitializeTable,
46	failure: this.onDataReturnInitializeTable,
47	scope: this,
48	argument: {
49	// Pass in sort values so UI can be updated in callback function
50	sorting: {
51	key: oColumn.key,
52	dir: (sDir === "asc") ? YAHOO.widget.DataTable.CLASS_ASC : YAHOO.widget.DataTable.CLASS_DESC
53	}
54	}
55	}
56
57	// Send the request
58	this.getDataSource().sendRequest(newRequest, oCallback);
59	};
60	};
61	});
	view plain \| print \| ?

YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.ServerSorting = new function() {
        // Column definitions
        var myColumnDefs = [
            {key:"id", label:"ID", sortable:true},
            {key:"name", label:"Name", sortable:true},
            {key:"date", label:"Date", sortable:true},
            {key:"price", label:"Price", sortable:true},
            {key:"number", label:"Number", sortable:true}
        ];

// DataSource instance
        this.myDataSource = new YAHOO.util.DataSource("assets/php/json_proxy.php?");
        this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
        this.myDataSource.responseSchema = {
            resultsList: "records",
            fields: ["id","name","date","price","number"]
        };

// DataTable instance
        var oConfigs = {
            initialRequest: "sort=id&dir=asc&results=100", // Server parameters for initial request
            sortedBy: {key:"id", dir:YAHOO.widget.DataTable.CLASS_ASC}, // Set up initial column headers UI
            renderLoopSize: 25 // Bump up to account for large number of rows to display
        };
        this.myDataTable = new YAHOO.widget.DataTable("serversorting", myColumnDefs,
                this.myDataSource, oConfigs);

// Override function for custom server-side sorting
        this.myDataTable.sortColumn = function(oColumn) {
            // Default ascending
            var sDir = "asc"
            
            // If already sorted, sort in opposite direction
            if(oColumn.key === this.get("sortedBy").key) {
                sDir = (this.get("sortedBy").dir === YAHOO.widget.DataTable.CLASS_ASC) ?
                        "desc" : "asc";
            }

// Pass in sort values to server request
            var newRequest = "sort=" + oColumn.key + "&dir=" + sDir + "&results=100&startIndex=0";
            
            // Create callback for data request
            var oCallback = {
                success: this.onDataReturnInitializeTable,
                failure: this.onDataReturnInitializeTable,
                scope: this,
                argument: {
                    // Pass in sort values so UI can be updated in callback function
                    sorting: {
                        key: oColumn.key,
                        dir: (sDir === "asc") ? YAHOO.widget.DataTable.CLASS_ASC : YAHOO.widget.DataTable.CLASS_DESC
                    }
                }
            }
            
            // Send the request
            this.getDataSource().sendRequest(newRequest, oCallback);
        };
    };
});

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

Sample Code for this Example

DataTable Control (beta) Examples:

More DataTable Control (beta) Resources: