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"},
            {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"}
        ];

// Show over 1000 records
        this.myDataSource = new YAHOO.util.DataSource("assets/php/json_proxy.php?");
        // Show 5000 records -- FireBug must be disabled!
        //this.myDataSource = new YAHOO.util.DataSource("assets/php/json5000_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"]
        };

var oConfigs = {
                paginated:true,
                paginator: {
                    rowsPerPage: 100,
                    dropdownOptions: [25,50,100,500]
                },
                initialRequest: "results=504"
        };
        this.myDataTable = new YAHOO.widget.DataTable("paginated", myColumnDefs,
                this.myDataSource, oConfigs);
    };
});

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

Sample Code for this Example

DataTable Control (beta) Examples:

More DataTable Control (beta) Resources: