默认效果
如果配置了datatable的paginator属性,那么datatable默认会生成两个分页条,上下各一个,见官方例子:
以下例子定制了分页条的显示,效果如下截图:
源码由于数据源使用json,故无法将所有代码贴出,可参照YUI官方网配置js
<%@ page language="java" contentType="text/html; charset=GBK"%>
<!--Script and CSS includes for YUI dependencies on this page-->
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/js/yui/2.6.0/build/datatable/assets/skins/sam/datatable.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/js/yui/2.6.0/build/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="<%=request.getContextPath()%>/js/yui/2.6.0/build/yuiloader/yuiloader-min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/yui/2.6.0/build/dom/dom-min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/yui/2.6.0/build/event/event-min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/yui/2.6.0/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/yui/2.6.0/build/element/element-beta-min.js"></script>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/js/yui/2.6.0/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/js/yui/2.6.0/build/paginator/assets/skins/sam/paginator.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/js/yui/2.6.0/build/datatable/assets/skins/sam/datatable.css" />
<script type="text/javascript" src="<%=request.getContextPath()%>/js/yui/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/yui/2.6.0/build/connection/connection-min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/yui/2.6.0/build/json/json-min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/yui/2.6.0/build/paginator/paginator-debug.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/yui/2.6.0/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/yui/2.6.0/build/datatable/datatable-debug.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/yui/2.6.0/build/logger/logger-min.js"></script>
<link type="text/css" rel="stylesheet" href="<%=request.getContextPath()%>/js/yui/2.6.0/build/logger/assets/skins/sam/logger.css">
<script type="text/javascript" src="<%=request.getContextPath()%>/js/dcj/core-util.js"></script>
<!-- Customized CSS -->
<style type="text/css">
#dataContainer.yui-dt {
border-bottom: 1px solid transparent;
width: 80%;
font-size:15;
}
#dataContainer.yui-dt-body {
cursor: pointer;
} /* when rows are selectable */
#single {
margin-top: 2em;
}
#myLogger{
position:absolute;
top : 20px;
right:50px;
font-size:18;
}
</style>
<script>
var DCJ_Datatable=function(myColumnDefs,elContainer,myListUrl,sTitle){
// Column defs.
this.m_columnDefs=myColumnDefs;
this.m_url=myListUrl;
// Date source.
this.m_datasource=new YAHOO.util.DataSource(myListUrl+"?");
this.m_datasource.responseType = YAHOO.util.DataSource.TYPE_JSON;
this.m_datasource.connXhrMode = "queueRequests";
this.m_datasource.responseSchema={
resultsList: "records",
metaFields: {
totalRecords: "totalRecords"
}
};
this.m_datasource.responseSchema.fields=this.m_columnDefs;
//Customize paginator.
//Bar for paginator
var shtml="{FirstPageLink} {PreviousPageLink} {NextPageLink} {LastPageLink} ";
shtml+="{CurrentPageReport}";
var myPaginator = new YAHOO.widget.Paginator({
rowsPerPage:<%=request.getAttribute("rowsPerPage")%>,
firstPageLinkLabel : "第一页",
lastPageLinkLabel : "尾页",
previousPageLinkLabel:"上一页",
nextPageLinkLabel:"下一页",
containers:"paginatorContainer",
template:shtml,
pageReportTemplate : '第 {currentPage} 页 总页数: {totalPages} 总记录数: {totalRecords} '
});
var myConfigs = {
initialRequest: "sort=id&dir=asc&startIndex=0&results=2", // Initial request for first page of data
dynamicData: true, // Enables dynamic server-driven data
sortedBy : {key:"id", dir:YAHOO.widget.DataTable.CLASS_ASC}, // Sets UI initial sort arrow
paginator:myPaginator,
MSG_ERROR:"加载数据发生错误,查询路径是否正确?",
MSG_LOADING:"正在加载数据
",
MSG_EMPTY:"没有记录.",
caption:sTitle,
MSG_SORTASC:"以升序方式排序",
MSG_SORTDESC:"以降序方式排序"
};
this.m_dataTable = new YAHOO.widget.DataTable(elContainer,this.m_columnDefs, this.m_datasource,myConfigs);
// Subscribe to events for row selection
this.m_dataTable.subscribe("rowMouseoverEvent", this.m_dataTable.onEventHighlightRow);
this.m_dataTable.subscribe("rowMouseoutEvent", this.m_dataTable.onEventUnhighlightRow);
this.m_dataTable.subscribe("rowClickEvent", this.m_dataTable.onEventSelectRow);
// Update totalRecords on the fly with value from server
this.m_dataTable.handleDataReturnPayload = function(oRequest, oResponse, oPayload) {
oPayload.totalRecords = oResponse.meta.totalRecords;
return oPayload;
}
}
</script>
<%@ page language="java" contentType="text/html; charset=GBK"%>
<%@ taglib uri="/tags/jstl/core" prefix="c"%>
<html>
<head>
<title></title>
<head>
<body class="yui-skin-sam">
<div id="dataContainer"></div>
<div id="paginatorContainer"></div>
<jsp:include page="/jsp/common/datatable.jsp"></jsp:include>
</body>
</html>
<script language="javascript">
//var myLogReader = new YAHOO.widget.LogReader("myLogger");
var myColumnDefs=<%=request.getAttribute("columnDefs")%>;
var myListUrl='<%=request.getAttribute("listUrl")%>';
var g_dt = new DCJ_Datatable(myColumnDefs,"dataContainer",myListUrl,"部门设置 --> 列表界面");
</script>
上面的代码新增一个容器并将分页条放在容器之内(上例是一个名为paginatorContainer的div).
分页条的模板分页条其实由两部分组成,第一部分称为template属性,是表示上一页,下一页等链接的html代码,即如下图所示部分:
这段template的定制代码如上所示,为:
var shtml="{FirstPageLink} {PreviousPageLink} {NextPageLink} {LastPageLink}
{FirstPageLink} 等几个变量是paginator组件预定义好的.他们的label(即第一页等文字)可以自由定制,见paginator的配置代码:
var myPaginator = new YAHOO.widget.Paginator({
rowsPerPage:<%=request.getAttribute("rowsPerPage")%>,
firstPageLinkLabel : "第一页",
lastPageLinkLabel : "尾页",
previousPageLinkLabel:"上一页",
nextPageLinkLabel:"下一页",
containers:"paginatorContainer",
template:shtml,
pageReportTemplate : '第 {currentPage} 页 总页数: {totalPages} 总记录数: {totalRecords} '
});
你可以将这些文字换成任何你喜欢的文字.
另外一部分,如总页数,总记录数等显示,在paginator组件术语里称为CurrentPageReport ,如下图所示:
要定制这部分的显示内容,首先要定义pageReportTemplate属性.本例的pageReportTemplate是一段html,引用了总页数,总记录数等几个变量,如下:
pageReportTemplate : '第 {currentPage} 页 总页数: {totalPages} 总记录数: {totalRecords} '
然后,每次数据返回的时候,paginator就会自动更新CurrentPageReport 变量的值,在template里引用该值即可.上例将pageReport和分页按钮放在同一行.所以你看到的代码如下:
var shtml="{FirstPageLink} {PreviousPageLink} {NextPageLink} {LastPageLink} ";
shtml+="{CurrentPageReport}";
定制pageReport参看源码可知,在pageRepor里paginator默认生成了如下几个属性:
p.setAttributeConfig('pageReportValueGenerator', {
value : function (paginator) {
var curPage = paginator.getCurrentPage(),
records = paginator.getPageRecords();
return {
'currentPage' : records ? curPage : 0,
'totalPages' : paginator.getTotalPages(),
'startIndex' : records ? records[0] : 0,
'endIndex' : records ? records[1] : 0,
'startRecord' : records ? records[0] + 1 : 0,
'endRecord' : records ? records[1] + 1 : 0,
'totalRecords': paginator.get('totalRecords')
};
},
validator : l.isFunction
});
在例子里我们引用了当前页currentPage,总记录数totalRecords等属性.如果默认属性不能满足你的需求,你可以改写这个函数进行定制.可以参考YUI的
自定义paginator一文.