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

Sample Code for this Example

Data:

CSS:

Markup:

JavaScript:

YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.ServerPagination = new function() {
        // Column definitions
        var myColumnDefs = [
            {key:"id", label:"ID"},
            {key:"name", label:"Name"},
            {key:"date", label:"Date"},
            {key:"price", label:"Price"},
            {key:"number", label:"Number"},
            {key:"address", label:"Address"},
            {key:"company", label:"Company"},
            {key:"desc", label:"Description"},
            {key:"age", label:"Age"},
            {key:"title", label:"Title"},
            {key:"phone", label:"Phone"},
            {key:"email", label:"Email"},
            {key:"zip", label:"Zip"},
            {key:"country", label:"Country"}
        ];

// 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","address","company","desc","age","title","phone","email","zip","country"]
        };

// DataTable instance
        var oConfigs = {
            initialRequest: "startIndex=0&results=25" // Initial values
        };
        this.myDataTable = new YAHOO.widget.DataTable("serverpagination", myColumnDefs,
                this.myDataSource, oConfigs);

// Custom code to parse the raw server data for Paginator values and page links
        this.myDataSource.doBeforeCallback = function(oRequest, oRawResponse, oParsedResponse) {
            var oSelf = YAHOO.example.ServerPagination;
            var oDataTable = oSelf.myDataTable;

// Get Paginator values
            var oRawResponse = oRawResponse.parseJSON(); //JSON.parse(oRawResponse); // Parse the JSON data
            var recordsReturned = oRawResponse.recordsReturned; // How many records this page
            var startIndex = oRawResponse.startIndex; // Start record index this page
            var endIndex = startIndex + recordsReturned -1; // End record index this page
            var totalRecords = oRawResponse.totalRecords; // Total records all pages

// Update the DataTable Paginator with new values
            var newPag = {
                recordsReturned: recordsReturned,
                startRecordIndex: startIndex,
                endIndex: endIndex,
                totalResults: totalRecords
            }
            oDataTable.updatePaginator(newPag);

// Update the links UI
            YAHOO.util.Dom.get("prevLink").innerHTML = (startIndex === 0) ? "<" :
                    "<a href=\"#previous\" alt=\"Show previous items\"><</a>" ;
            YAHOO.util.Dom.get("nextLink").innerHTML =
                    (endIndex >= totalRecords) ? ">" :
                    "<a href=\"#next\" alt=\"Show next items\">></a>";
            YAHOO.util.Dom.get("startIndex").innerHTML = startIndex;
            YAHOO.util.Dom.get("endIndex").innerHTML = endIndex;
            YAHOO.util.Dom.get("ofTotal").innerHTML = " of " + totalRecords;

// Let the DataSource parse the rest of the response
            return oParsedResponse;
        };

// Hook up custom pagination
        this.getPage = function(nStartRecordIndex, nResults) {
            // If a new value is not passed in
            // use the old value
            if(!YAHOO.lang.isValue(nResults)) {
                nResults = this.myDataTable.get("paginator").totalRecords;
            }
            // Invalid value
            if(!YAHOO.lang.isValue(nStartRecordIndex)) {
                return;
            }
            var newRequest = "startIndex=" + nStartRecordIndex + "&results=" + nResults;
            this.myDataSource.sendRequest(newRequest, this.myDataTable.onDataReturnInitializeTable, this.myDataTable);
        };
        this.getPreviousPage = function(e) {
            YAHOO.util.Event.stopEvent(e);
            // Already at first page
            if(this.myDataTable.get("paginator").startRecordIndex === 0) {
                return;
            }
            var newStartRecordIndex = this.myDataTable.get("paginator").startRecordIndex - this.myDataTable.get("paginator").rowsThisPage;
            this.getPage(newStartRecordIndex);
        };
        this.getNextPage = function(e) {
            YAHOO.util.Event.stopEvent(e);
            // Already at last page
            if(this.myDataTable.get("paginator").startRecordIndex +
                    this.myDataTable.get("paginator").rowsThispage >=
                    this.myDataTable.get("paginator").totalRecords) {
                return;
            }
            var newStartRecordIndex = (this.myDataTable.get("paginator").startRecordIndex + this.myDataTable.get("paginator").rowsThisPage);
            this.getPage(newStartRecordIndex);
        };
        YAHOO.util.Event.addListener(YAHOO.util.Dom.get("prevLink"), "click", this.getPreviousPage, this, true);
        YAHOO.util.Event.addListener(YAHOO.util.Dom.get("nextLink"), "click", this.getNextPage, this, true);
    };
});

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

Sample Code for this Example

DataTable Control (beta) Examples:

More DataTable Control (beta) Resources: