YUI动态分页--paginator

花了三天研究YUI的paginator，最终用2.5的版本跑通，让我很郁闷的是我今天下午刚发现2.8的paginator官方示例（http://webbits.pl/yui/examples/datatable/dt_serverpagination.html）就是有bug的，示例的数据loading后就一直出不来，现在再去看竟然好了，看了页面源码后发现是做过了修改，我可是对着不能执行的代码研究了好长时间啊。

那现在就先记录下YUI2.5成功动态分页的代码：

 

1、首先是YUI依赖的js文件，顺序应该有要求的，我换过顺序是有问题的：）

 

    <script type="text/javascript" src="$tpsContent.setContentPath("static/lib/build/utilities.js")"></script>
    <script type="text/javascript" src="$tpsContent.setContentPath("static/lib/build/json.js")"></script>
    <script type="text/javascript" src="$tpsContent.setContentPath("static/lib/build/datasource-beta.js")"></script
    <script type="text/javascript" src="$tpsContent.setContentPath("static/lib/build/datatable-beta.js")"></script>

 

2、分页组件在以下html标签下生成

 

<div class="bd">
	<div id="demo">
		<div id="paging">
        </div>
	<div id="dt"></div>
</div

 

3、动态生成分页table的核心js代码

 

                        <script type="text/javascript">
							YAHOO.util.Event.onDOMReady(function () {
							    var DataSource = YAHOO.util.DataSource,
							        DataTable  = YAHOO.widget.DataTable,
							        Paginator  = YAHOO.widget.Paginator;
							
							    var mySource = new DataSource("$tpsContent.setContentPath("user/user_paginator.do?")");
							    mySource.responseType   = DataSource.TYPE_JSON;
							    mySource.responseSchema = {
							    	resultsList: 'data',
                                                                fields: ["userId","userName"],
							        totalRecords: 'totalRecords'
							    };
							
							    var buildQueryString = function (state,dt) {
							        return "startIndex=" + state.pagination.recordOffset +
							               "&results=" + state.pagination.rowsPerPage;
							    };
							
							    var myPaginator = new Paginator({
							    	containers         : ["paging"],
							        pageLinks          : 5,
							        rowsPerPage        : 10,
							        rowsPerPageOptions : [10,15,20],
							        template           : "<strong>{CurrentPageReport}</strong> {PreviousPageLink} {PageLinks} {NextPageLink} {RowsPerPageDropdown}"
							    });
							
							    var myTableConfig = {
							        initialRequest         : 'startIndex=0&results=10',
							        generateRequest        : buildQueryString,
							        paginationEventHandler : DataTable.handleDataSourcePagination,
							        paginator              : myPaginator
							    };
							
                                                            var myColumnDefs = [
                                                           {
                                                               key:"userId",
                                                               label:"工号",
                                                               width:100,
                                                               resizeable:true,
                                                              sortable:true
                                                          },
                                                         {
                                                              key:"userName",
                                                              label:"姓名",
                                                              width:585,
                                                              resizeable:true,
                                                              sortable:false
                                                          }
                                                        ];
							
							    var myTable = new DataTable('dt', myColumnDefs, mySource, myTableConfig);
							});
				</script>

 

YUI2.8的动态分页代码：

 

   html标签部分

 

<div id="dt-pag-nav">
    <span id="prevLink"><</span> Showing items
    <span id="startIndex">0</span> - <span id="endIndex">24</span>
    <span id="ofTotal"></span> <span id="nextLink">></span>
</div>
<div id="serverpagination"></div>

 

js生成组件代码

 

                        <script type="text/javascript">
                        	YAHOO.namespace("tps");
                            // 监听端口
                            YAHOO.util.Event.addListener(window, "load", function() {

                                // grid 需要完成的功能有：表格显示数据源，数据源来自 ajax 请求，分页同样是 ajax 请求
                                // 工号排序，修改选中记录
                                // TODO：1、通过某个事件触发 ajax 请求；2、将返回的数据转成 json；3、分页模块的实现；4、绑定选中事件的监听函数。
                                // TODO：涉及到的组件分别是：1、connection manager；2、JSON；3、paginator；4、event
                                YAHOO.tps.ServerPagination = new function() {

                                    var GRID_WIDTH = 685;
                                    // 定义表头
                                    var myColumnDefs = [
                                        {
                                            key:"userId",
                                            label:"工号",
                                            width:100,
                                            resizeable:true,
                                            sortable:true
                                        },
                                        {
                                            key:"userName",
                                            label:"姓名",
                                            width:GRID_WIDTH - 100,
                                            resizeable:true,
                                            sortable:false
                                        }
                                    ];
                                    // 配置数据源，来自一个 json
                                    this.myDataSource = new YAHOO.util.DataSource("$tpsContent.setContentPath("user/user_paginator.do?")");
                                    this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
                                    this.myDataSource.responseSchema = {
                                    	resultsList: "data",
                                        fields: ["userId","userName"]
                                    };
            
                                    // 自定义表格
                                    var myConfigs = {
                                    	initialRequest: "startIndex=0&results=20"
                                    };

                                    // 拿到 id 生成 grid
                                    this.myDataTable = new YAHOO.widget.DataTable("grid", myColumnDefs, this.myDataSource, myConfigs);
									
									// Custom code to parse the raw server data for Paginator values and page links   
							        this.myDataSource.doBeforeCallback = function(oRequest, oRawResponse, oParsedResponse) {   
							             var oSelf = YAHOO.tps.ServerPagination;   
							             var oDataTable = oSelf.myDataTable;   
							   
							             // Get Paginator values   
							             //var oRawResponse = oRawResponse.parseJSON(); //oRawResponse.parseJSON(); // Parse the JSON data   
							             var recordsReturned = oRawResponse.pageSize; // 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;   
							         };
									
									 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);
                                };
                            });
                        </script>

 

 上面这部分就是官网演示的例子代码，显然这部分代码是无法解决第一次回调获取table数据的，看了现在成功示例的页面源文件后发现加了下面代码

 

// Global init var to run Loader only once
var gRunInit = true;
var gRunDataTable = true;
YAHOO_config = {
    load: {
        require: ['yahoo'],
        base: '../../build/',
        onLoadComplete: function(loader) {
            if(gRunInit) {
                gRunInit = false;

                YAHOO.example.checkJson = function(name, loaderCallback) {
                    if (Object.prototype.toJSONString) {
                        loaderCallback();
                    } else {
                        setTimeout(function() {
                                YAHOO.example.checkJson(name, loaderCallback);
                            }, 3);
                    }
                };

                loader.addModule({
                    name: "json",
                    type: "js",
                    fullpath: "assets/js/json.js",
                    verifier: YAHOO.example.checkJson
                });

                loader.require("fonts", "json", "connection", "datatable");

                loader.onLoadComplete = function(loader) {
                    if(gRunDataTable) {
                        gRunDataTable = false;
              YAHOO.example.ServerPagination = new function() {
                     .......................//接上面代码段
              }
              loader.insert();
            }
        }

 

这样就成功初始化了第一次请求的数据，后面就点击前页后页出发回调时间进行动态分页了