YUI分页实践
本文详细介绍了使用YUI 2.5及2.8版本实现动态分页的过程，包括必要的JS文件加载顺序、HTML标签设置及核心JS代码，并解决了官方示例中存在的问题。
花了三天研究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();
}
}
这样就成功初始化了第一次请求的数据，后面就点击前页后页出发回调时间进行动态分页了
扫一扫
173
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
