最近在用一款来自网易的javascript MVC 框架regularJS来写项目,这是网易一位叫郑海波的大神写的一款框架，所谓regualrJS， 作者这样取名主要是因为这个框架更像是angular与react的集合体，按照作者的话说大概是regular = react(ractive) + angular，此框架对于我来说最好用的特点是模板对于数据的渲染。同时框架支持引入其他类似于jquery,zepto等轻量级前端框架。关于regular框架我就不多说了，有兴趣的同学，可以访问https://sdk.cn/news/2927这个地址，里面是作者自己分享的关于regular的种种特性。讲解很详细，让我受益良多。
今天我们主要来说一款分页插件pagation.js，这款框架是基于jquery的，如果有同学的代码是直接基于jquery的话，建议大家访问http://www.jq22.com/jquery-info5697此地址。写这款插件的作者在里面进行了详细的描述。
下面我主要针对regularJs 这款框架如何使用进行简单的讲解。
首先引入js http://106.2.44.116/src/javascript/base/jquery.pagination.js
我的项目是基于freemarker写的。在ftl 文件中引入js ,同时在ftl文件初始化
1 <div id="container" class="container">
2 //container 为插入页面的盒子
3 </div>
4 <div class="box" style="height:20px;">
5 </div>
6 <script src="/src/javascript/base/regular.js"></script>
7 <script src="/nej/src/define.js?pro=/src/javascript/&module=/src/html/"></script>
8 <script src="/src/javascript/admin.js?v=20170419"></script>在container中插入整个regalar模板，box则是分页的盒子
接下来我们可以在模板js里单独写一个方法，用来展示分页，如下完成初始化：
1 PaginationSearch:function(){//regular 写方法的基本结构
2 var that = this;
3 $('.box').pagination({
4 totalData:that.data.total,//总条数
5 showData:15,//每页展示条数
6 coping:true,//开启首页和末页
7 jump:true,//开启跳转
8 keepShowPN:true,//一直显示上一页和下一页，不消失
9 homePage:'首页',//首页节点展示的文字信息
10 endPage:'末页',//末页节点展示的文字信息
11 prevContent:'上页',//上一页节点展示的文字信息
12 nextContent:'下页',//下一页节点展示的文字信息
13 callback:function(api){//点击节点后进行的回调
14 $('.now').text(api.getCurrent());
15
16 },function(api){//初始化完成后进行的回调
17 $('.now').text(api.getCurrent());
18
19 });
20 }其中分页的属性设置在对象中一一设置就好了，callback可以写点击页码后的操作，回调function为初始化显示分页后进行的操作，之后会对这两个方法进行详解
options(参数配置)
参数 | 默认值 | 说明 |
pageCount | 9 | 总页数 |
totalData | 0 | 数据总条数 |
current | 1 | 当前第几页 |
showData | 0 | 每页显示的条数 |
prevCls | 'prev' | 上一页class |
nextCls | 'next' | 下一页class |
prevContent | '<' | 上一页节点内容 |
nextContent | '>' | 下一页节点内容 |
activeCls | 'active' | 当前页选中状态class名 |
count | 3 | 当前选中页前后页数 |
coping | false | 是否开启首页和末页，值为boolean |
isHide | false | 总页数为0或1时隐藏分页控件 |
keepShowPN | false | 是否一直显示上一页下一页 |
homePage | '' | 首页节点内容，默认为空 |
endPage | '' | 尾页节点内容，默认为空 |
jump | false | 是否开启跳转到指定页数，值为boolean类型 |
jumpIptCls | 'jump-ipt' | 文本框内容 |
jumpBtnCls | 'jump-btn' | 跳转按钮class |
jumpBtn | '跳转' | 跳转按钮文本内容 |
callback | function(){} | 回调函数，参数"index"为当前页 |
api接口
方法 | 参数 | 说明 |
getPageCount() | 无 | 获取总页数 |
setPageCount(page) | page：页数 | 设置总页数 |
getCurrent() | 无 | 获取当前页 |
filling() | 无 | 填充数据，参数为页数 |
PaginationSearch:function(){
var that = this;
$('.box').pagination({
totalData:that.data.total,
showData:15,
coping:true,
jump:true,
keepShowPN:true,
homePage:'首页',
endPage:'末页',
prevContent:'上页',
nextContent:'下页',
callback:function(api){
$('.now').text(api.getCurrent());
var postParams = {//请求参数
pageSize: 15,//每页15条
currPage:api.getCurrent(),//当前页
};
xdr._$request('/workcardadmin/search.do', {//此方法的异步请求是nej的。也可以用$.ajax()的方式
method: 'POST',
type: 'JSON',
timeout: 5000,
data: _u._$object2query(postParams),
onbeforerequest:function() {
that.data.load = true;
},
onload: function(data) {//相当于jquery的success
if (data.code === 200){
setTimeout(function(){
that.data.load = false;
if(data.data == null){
}else{
$(".box").show();
that.data.auditList=data.data.list;//获取到的数据
that.data.total = data.data.totalCount;//获取到的数据
}
that.$update();
},100);
}
},
onerror: function() {
alert("网络繁忙，请稍后再试");
}
});
}
},function(api){
$('.now').text(api.getCurrent());
});
},代码中进行了注释，其中有一点。api.current()是当前页码
接下来说一下回调函数的作用，顾名思义，这个function的作用其实就是初始化分页展示完成，没有进行任何操作时希望进行的操作，比如进行样式操作。获取当前页码比较操作等
function(api){
$('.now').text(api.getCurrent());
if(api.getCurrent()!=1){
$('.prev').css({
'background':'#305fa7',
'color':'#fff'
});
}
if(api.getCurrent() != api.getPageCount()){
$('.next').css({
'background':'#305fa7',
'color':'#fff'
})
}
$('.jump-btn').css({
'background':'#305fa7',
'color':'#fff'
});
});上面代码是判断当前页如果不是第一页，则上一页的样式变化，不是最后一页则最后一页样式变化
至此，关于此插件的操作大概就说完了。当然如果你想多次重复调用展示页码也是可以的，只需要把每个点击页码的回调函数中地址，参数都用变量存储随时复制就好了，regular中可以不用var 来存储声明一个变量，在init得data中声明，下面用 this.data.名字来调用就可以啦。设置方式
data: {
audit:false
}调用方式：
this.data.audit顺便提一句 这个分页插件是组件样式与功能分离的，可自定义样式，具体样式无需引用什么，直接在css中修改就可以了
好了。我想分享的大概就是这些，解释的不清楚，话语啰嗦请大家海涵。有问题也可以评论问我。希望这篇文章可以对大家有所帮助。
