【自然框架】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不变，其他的都可以随意编排，想怎么编排就怎么编排，限制降到最低。模板如下： 

　　

2、  Css

　　用css来控制UI样式。这样更换css文件就可以实现更换风格。前一阵子有园友分享了24套样式，借鉴了一下。在这里大家一起感谢园友的分享。 

3、  Js脚本

　　分为三个部分，默认值、主体和扩展。

　　默认值就不用多说了，要想让分页能够顺利跑起来需要设置很多属性，但是过多的属性设置就很烦了，于是就有了“默认值”。常用的属性值作为默认属性，这样在调用的时候就不用重复设置一大堆的属性了。

　　主体，这个主体有一点MVC里的C的感觉——总体上的控制：加载模板、设置UI、创建页号导航、注册翻页事件等等。他本身并不实现具体的功能，而是把这些功能组合起来。

　　扩展，每一个功能都作为了一个扩展插件的形式，比如创建页号导航。页号导航有很多总形式，一中形式肯定不能满足所有人的需求，那么怎么办呢？把每种形式都罗列出来吗？这样整个分页代码就会比较臃肿。所以就想到了这种扩张的形式。在主体外面实现页号导航的功能，在主体里调用。如果自带的不能满足，那么可以把自己写一个替换掉自带的。而总体结构不会发生变化。达到了“对扩展开放，对修改关闭”。

使用方法：

1、  设置“属性”。

　　虽然属性有很多，但是最低只需要设置两个属性——总记录数和存放分页控件的容器ID。

　　不设置总记录数，就不知道有多少页，页号导航就做不出来，UI也没法控制。而总记录数又没法设置默认值。

　　存放分页控件的容器ID，简单的说就是DIV的ID，当然也可以放在td里面，只要设置好ID就行。如果要实现上下两个分页UI，那么只需要把这两个ID用半角逗号分割，设置上就行。

2、  设置事件。

　　翻页的时候触发的事件。Js的事件处理真的是太简单了，就跟属性一样。弄个function就可以了。

　　翻页的时候触发OnPageChange ，传递过来两个参数，一个是翻页前的页号(oldPageIndex)，一个是要翻到哪一页( thisPageIndex)。

3、  开始呈现。

　　属性和事件设置好了之后就可以呈现了。调一个函数就可以，内部会自动调用OnPageChange(0,1)来呈现第一页的数据。如果呈现之后还要做点什么的话，可以加一个回调函数。

在线演示：

可以更换模板，可以更换css

鸣谢!

　　感谢群里的兄弟们帮忙做测试，发现了几个小bug和没注意到的地方。

　　如果大家也挺感兴趣的话，欢迎加群：82598514