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

Sample Code for this Example

Data:

CSS:

Markup:

JavaScript:

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

this.myDataSource = new YAHOO.util.DataSource("assets/php/json_proxy.php?");
        this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;

// When responseSchema.totalRecords is not indicated, the records
        // returned from the DataSource are assumed to represent the entire set
        this.myDataSource.responseSchema = {
            resultsList: "records",
            fields: ["id","name","date","price","number"]
        };

// The Paginator instance will have its totalRecords configuration
        // populated by the DataTable when it receives the records from the
        // DataSource
        var oConfigs = {
                paginator: new YAHOO.widget.Paginator({
                    rowsPerPage: 15
                }),

// Show over 500 records
                initialRequest: "results=504"
        };

this.myDataTable = new YAHOO.widget.DataTable("paginated", myColumnDefs,
                this.myDataSource, oConfigs);
    };
});

YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

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

Sample Code for this Example

YUI Logger Output:

DataTable Control (beta) Examples:

More DataTable Control (beta) Resources: