Clientside-Pagination

YUI Library JavaScript DHTML


            

    
Client-side Pagination

/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
  margin:0;
  padding:0;
}













    #paginated {
        text-align: center;
    }
    #paginated table {
        margin-left:auto; margin-right:auto;
    }
    #paginated, #paginated .yui-dt-loading {
        text-align: center; background-color: transparent;
    }




Client-side Pagination


  This example retrieves a large data set in JSON format from a server script, then loads the data into a DataTable with client side pagination enabled.

YAHOO.util.Event.onDOMReady(function() {
    YAHOO.example.ClientPagination = function() {
        var myColumnDefs = [
            {key:"id", label:"ID"},
            {key:"name", label:"Name"},
            {key:"date", label:"Date"},
            {key:"price", label:"Price"},
            {key:"number", label:"Number"}
        ];
        var myDataSource = new YAHOO.util.DataSource("yui_2.7.0b-assets/datatable-assets/php/json_proxy.php?");
        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
        myDataSource.responseSchema = {
            resultsList: "records",
            fields: ["id","name","date","price","number"]
        };
        var oConfigs = {
                paginator: new YAHOO.widget.Paginator({
                    rowsPerPage: 15
                }),
                initialRequest: "results=504"
        };
        var myDataTable = new YAHOO.widget.DataTable("paginated", myColumnDefs,
                myDataSource, oConfigs);

        return {
            oDS: myDataSource,
            oDT: myDataTable
        };
    }();
});



yui_2.7.0b.zip( 4,431 k)