【自然框架】js版的QuickPager分页控件 V2.0
优点：
1、 通过更换模板可以控制各个分页元素（比如首页、末页，页号导航等）的位置和是否显示。
2、 通过更换css可以实现各种UI风格和效果。（附带24套css效果）
3、 Js的方式创建分页UI，不占用服务器资源。
4、 可以通过插件的方式更换各部分js代码。如果自带的js代码不能满足您的需求，那么您自己写的插件实现需要的效果。
5、 Ajax的方式获取记录集，减轻网络负担。
6、 多种调用方式，让“偷懒”和灵活共存。
缺点：
1、 不支持SEO。因为用js和ajax，所以不支持搜索引擎的收录。
2、 不支持服务器端控件，比如GridView。
内容介绍：
1、 模板
设置一个htm页面，存放分页用的模板，这样只要保证及格ID不变，其他的都可以随意编排，想怎么编排就怎么编排，限制降到最低。模板如下：
< div id = "PageTurn" class = "pager" >
< span >共< font id = "P_RecordCount" style = "color:Red;" ></ font >条记录</ span >
< span >第< font id = "P_Index" style = "color:Red;" ></ font >/< font id = "P_PageCount" style = "color:Red;" ></ font >页</ span >
< span >每页< font id = "P_PageSize" style = "color:Red;" ></ font >条记录</ span >
< span id = "S_First" class = "disabled" >首页</ span >
< span id = "S_Prev" class = "disabled" >上一页</ span >
< span id = "S_navi" > <!--页号导航--> </ span >
< span id = "S_Next" class = "disabled" >下一页</ span >
< span id = "S_Last" class = "disabled" >末页</ span >
< input id = "Txt_GO" class = "cssTxt" name = "Txt_GO" type = "text" size = "1" />
< span id = "P_GO" >GO</ span >
</ div >
2、 Css
用css来控制UI样式。这样更换css文件就可以实现更换风格。前一阵子有园友分享了24套样式，借鉴了一下。在这里大家一起感谢园友的分享。
div.pager {
text-align : center ; padding-bottom : 10px ; background-color : #000 ; margin : 3px ; padding-left : 3px ; padding-right : 3px ; color : #a0a0a0 ; font-size : 80% ; padding-top : 10px
}
div.pager a {
background-image : url(bar.gif) ; border-bottom : #909090 1px solid ; border-left : #909090 1px solid ; padding-bottom : 2px ; padding-left : 5px ; padding-right : 5px ; background-position : 50% bottom ; color : #c0c0c0 ; border-top : #909090 1px solid ; margin-right : 3px ; border-right : #909090 1px solid ; text-decoration : none ; padding-top : 2px
}
div.pager a:hover {
background-image : url(invbar.gif) ; border-bottom : #f0f0f0 1px solid ; border-left : #f0f0f0 1px solid ; background-color : #404040 ; color : #ffffff ; border-top : #f0f0f0 1px solid ; border-right : #f0f0f0 1px solid
}
div.pager a:active {
background-image : url(invbar.gif) ; border-bottom : #f0f0f0 1px solid ; border-left : #f0f0f0 1px solid ; background-color : #404040 ; color : #ffffff ; border-top : #f0f0f0 1px solid ; border-right : #f0f0f0 1px solid
}
div.pager span.current {
border-bottom : #ffffff 1px solid ; border-left : #ffffff 1px solid ; padding-bottom : 2px ; background-color : #606060 ; padding-left : 5px ; padding-right : 5px ; color : #ffffff ; border-top : #ffffff 1px solid ; font-weight : bold ; margin-right : 3px ; border-right : #ffffff 1px solid ; padding-top : 2px
}
div.pager span.disabled {
border-bottom : #606060 1px solid ; border-left : #606060 1px solid ; padding-bottom : 2px ; padding-left : 5px ; padding-right : 5px ; color : #808080 ; border-top : #606060 1px solid ; margin-right : 3px ; border-right : #606060 1px solid ; padding-top : 2px
}
3、 Js脚本
分为三个部分，默认值、主体和扩展。
默认值 就不用多说了，要想让分页能够顺利跑起来需要设置很多属性，但是过多的属性设置就很烦了，于是就有了“默认值”。常用的属性值作为默认属性，这样在调用的时候就不用重复设置一大堆的属性了。
Nature.Page.QuickPagerDefaultInfo = {
recordCount: -1, // 总记录数
pageSize: 10, // 一页记录数
pageCount: -1, // 总页数，不用设置，根据上两个条件自动计算
thisPageIndex: 1, // 当前页号
beforePageIndex: 1, // 上一次的页号
// lastPageIndex: 0, //最后一页的页号，自动计算
naviCount: 7, // 页号导航的数量
isUseRecordCount: true , // 是否使用缓存的总记录数
pageTurnDivIDs: "", // 放置分页控件的div的id，可以是多个，用半角逗号分隔
// 分页控件模板的路径和文件名
templetPath:"/aspnet_client/QuickPager/PageTurn2.htm" ,
// 分页控件css文件的路径和文件名
cssPath: "/aspnet_client/QuickPager/skin/default/pager.css" ,
OnPageChange: function () { }, // 翻页的事件
NaviCreate: function () { }, // 创建页号导航
SetPageUI: function () { }, // 设置分页UI
RegPagerEvent: function () { } // 注册分页UI的事件，不包括页号导航的事件
};
主体 ，这个主体有一点MVC里的C的感觉——总体上的控制：加载模板、设置UI、创建页号导航、注册翻页事件等等。他本身并不实现具体的功能，而是把这些功能组合起来。
//js版的QuickPager
Nature.Page.QuickPager = function () {
this .pagerInfo = {};
this .Start = function (callback) {
//设置默认值
setDefaultInfo( this .pagerInfo);
var info = this .pagerInfo;
//设置css。如果没有设置，则不动态加载
if (info.cssPath != undefined)
Nature.CommonFunction.addStyle(info.cssPath);
//加载模板
$.get(info.templetPath, function (data) {
//alert("加载分页模板成功");
//模板放到div里面
var tmpdiv = info.pageTurnDivIDs.split( "," );
$( "#" + tmpdiv[0]).html(data);
if (info.recordCount != -1) info.SetPageUI(info); //设置分页UI
info.RegPagerEvent(info); //注册事件（仅限上一页、下一页、首页、末页，不包括页号导航）
info.NaviCreate(info); //设置页号导航
//调用外部函数，提取记录创建table
info.OnPageChange(0, 1);
if (callback != undefined)
callback(); //回调
//克隆多个分页UI
if (tmpdiv.length > 1) {
window.setTimeout( function () {
var pageHtml = $( "#" + tmpdiv[0]).clone( true );
for ( var i = 1; i < tmpdiv.length; i++) {
$( "#" + tmpdiv[i]).html(pageHtml);
}
}, 100);
}
});
};
//设置默认值
var setDefaultInfo = function (a) {
var b = Nature.Page.QuickPagerDefaultInfo;
if (a.recordCount == undefined) a.recordCount = b.recordCount;
if (a.pageSize == undefined) a.pageSize = b.pageSize;
if (a.pageCount == undefined) a.pageCount = b.pageCount;
if (a.thisPageIndex == undefined) a.thisPageIndex = b.thisPageIndex;
if (a.beforePageIndex == undefined) a.beforePageIndex = b.beforePageIndex;
if (a.isUseRecordCount == undefined) a.isUseRecordCount = b.isUseRecordCount;
if (a.naviCount == undefined) a.naviCount = b.naviCount;
if (a.templetPath == undefined) a.templetPath = b.templetPath;
if (a.NaviCreate == undefined) a.NaviCreate = Nature.Page.QuickPagerExtend.CreateNavi;
if (a.SetPageUI == undefined) a.SetPageUI = Nature.Page.QuickPagerExtend.SetPageUI;
if (a.RegPagerEvent == undefined) a.RegPagerEvent = Nature.Page.QuickPagerExtend.RegPagerEvent;
};
};
扩展 ，每一个功能都作为了一个扩展插件的形式，比如创建页号导航。页号导航有很多总形式，一中形式肯定不能满足所有人的需求，那么怎么办呢？把每种形式都罗列出来吗？这样整个分页代码就会比较臃肿。所以就想到了这种扩张的形式。在主体外面实现页号导航的功能，在主体里调用。如果自带的不能满足，那么可以把自己写一个替换掉自带的。而总体结构不会发生变化。达到了“对扩展开放，对修改关闭”。
使用方法：
1、 设置“属性”。
虽然属性有很多，但是最低只需要设置两个属性——总记录数和存放分页控件的容器ID。
不设置总记录数，就不知道有多少页，页号导航就做不出来，UI也没法控制。而总记录数又没法设置默认值。
存放分页控件的容器ID，简单的说就是DIV的ID，当然也可以放在td里面，只要设置好ID就行。如果要实现上下两个分页UI，那么只需要把这两个ID用半角逗号分割，设置上就行。
2、 设置事件。
翻页的时候触发的事件。Js的事件处理真的是太简单了，就跟属性一样。弄个function就可以了。
翻页的时候触发OnPageChange ，传递过来两个参数，一个是翻页前的页号(oldPageIndex)，一个是要翻到哪一页( thisPageIndex)。
3、 开始呈现。
属性和事件设置好了之后就可以呈现了。调一个函数就可以，内部会自动调用OnPageChange(0,1)来呈现第一页的数据。如果呈现之后还要做点什么的话，可以加一个回调函数。
window.onload = function () {
var page = new Nature.Page.QuickPager();
// 设置相关属性
page.pagerInfo = {
recordCount: 102, // 总记录数
// pageSize: 10, //一页记录数
pageTurnDivIDs: "divQuickPage1", // 放置分页控件的div的id，可以是多个，用半角逗号分隔
// 翻页的事件
OnPageChange: function (oldPageIndex, thisPageIndex) {
alert( "翻页前页号：" + oldPageIndex);
alert( "翻页后页号：" + thisPageIndex);
// 可以自行获取记录，创建table
}
};
// 开始
page.Start( function () {
// 内部自动调用OnPageChange(0,1)。
});
};
在线演示：
http://www.naturefw.com/test/quickpager/PageTurn01.htm
可以更换模板，可以更换css
鸣谢!
感谢群里的兄弟们帮忙做测试，发现了几个小bug和没注意到的地方。
分类: 自定义控件—分页控件（更好用的控件）。 QuickPager
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息查看更多关于【自然框架】js版的QuickPager分页控件 V2.0的详细内容...