一款好用的分页插件用于regularJS
最近在用一款来自网易的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">
//container 为插入页面的盒子
</div>
<div class="box" style="height:20px;">
</div>
<script src="/src/javascript/base/regular.js"></script>
<script src="/nej/src/define.js?pro=/src/javascript/&module=/src/html/"></script>
<script src="/src/javascript/admin.js?v=20170419"></script>
在container中插入整个regalar模板,box则是分页的盒子
接下来我们可以在模板js里单独写一个方法,用来展示分页,如下完成初始化:
PaginationSearch:function(){//regular 写方法的基本结构
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()); },function(api){//初始化完成后进行的回调
$('.now').text(api.getCurrent()); });
}
其中分页的属性设置在对象中一一设置就好了,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() | 无 | 填充数据,参数为页数 |
如果你的分页是和后端有交互的分页,可以在callback函数中发异步请求请求分页数据
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中修改就可以了
好了。我想分享的大概就是这些,解释的不清楚,话语啰嗦请大家海涵。有问题也可以评论问我。希望这篇文章可以对大家有所帮助。
一款好用的分页插件用于regularJS的更多相关文章
- 精心挑选的12款优秀 jQuery Ajax 分页插件和教程
在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 ...
- 转:精心挑选的12款优秀 jQuery Ajax 分页插件和教程
在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 ...
- 12款优秀 jQuery Ajax 分页插件和教程
12款优秀 jQuery Ajax 分页插件和教程 在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 W ...
- 12款优秀jQuery Ajax分页插件和教程
在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 ...
- 一款不错的jQuery分页插件--pagination
一.前言: 分页功能在项目中时常用到,一款可以快速实现分页功能的插件非常有必要,pagination--这款插件功能非常完美,几乎我所有项目中使用到分页的地方都会第一时间考虑到这个插件,但是其实有能力 ...
- 一款基于jQuery的分页插件
特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...
- 让网站动起来!12款优秀的 jQuery 动画插件推荐
如今,大多数设计师和开发人员被要客户要求开发动态的网站.创造视觉震撼和醒目的动态网站是艰巨的任务,因为它需要大量的努力和创造力.在网络上有大量的工具和插件可用于创建网站动画.许多开发人员正在使用 HT ...
- Mybatis分页插件PageHelper的学习与使用
目录 中文教程 PageHelper使用 后端程序员都知道,在Web系统中,分页是一种常见的功能,我之前写的分页方法都比较麻烦,移植性也不高,这就很不乐观了.作为一个积极开朗的程序员,怎么能不去了解P ...
- mybatis分页插件PageHelp的使用
1.简介 PageHelper 是国内非常优秀的一款开源的 mybatis 分页插件,它支持基本主流与常用的数据库,例如 mysql.oracle.mariaDB.DB2.SQLite.Hsqld ...
随机推荐
- cocos2dx 中文路径编译错误记录
'/Q' 不是内部或外部命令,也不是可运行的程序1> 或批处理文件.1> 'y' 不是内部或外部命令,也不是可运行的程序1> 或批处理文件.1>C:\Program Files ...
- Android实现录屏直播(三)MediaProjection + VirtualDisplay + librtmp + MediaCodec实现视频编码并推流到rtmp服务器
请尊重分享成果,转载请注明出处,本文来自Coder包子哥,原文链接:http://blog.csdn.net/zxccxzzxz/article/details/55230272 Android实现录 ...
- 3018: [Usaco2012 Nov]Distant Pastures
3018: [Usaco2012 Nov]Distant Pastures Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 43 Solved: 20[ ...
- 1648: [Usaco2006 Dec]Cow Picnic 奶牛野餐
1648: [Usaco2006 Dec]Cow Picnic 奶牛野餐 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 432 Solved: 270[ ...
- 玩转Node.js单元测试
代码部署之前,进行一定的单元测试是十分必要的,这样能够有效并且持续保证代码质量.而实践表明,高质量的单元测试还可以帮助我们完善自己的代码.这篇博客将通过一些简单的测试案例,介绍几款Node.js测试模 ...
- cuda内存总结
1.shared memory __shared__ 声明为共享内存,将会保存在共享内存中 2.constant memory __constant__ 声明为常量内存,将会保存在常量内存中,常量内 ...
- java学习笔记 --- java基础语法
一.java标识符,关键字,保留字 1.标识符 用来增强程序阅读性自定义的名字.类名,变量名,方法名等都可以被称为标识符 标识符的组成: 1.由数字(0-9),字母(a-z,A-Z),下划线(_),美 ...
- 5种方法推导Normal Equation
引言: Normal Equation 是最基础的最小二乘方法.在Andrew Ng的课程中给出了矩阵推到形式,本文将重点提供几种推导方式以便于全方位帮助Machine Learning用户学习. N ...
- iOS开发之UITabBarController
1.概述 跟UINavigationController类似,UITabBarController也可以轻松地管理多个控制器,轻松完成控制器之间的切换,典型例子就是QQ.微信等应用. 2.UITabB ...
- window.onload 和 $(document).ready(function(){})的区别
这篇作为我的新的起点开始吧,发现年纪大了,记性就不好了,有些东西老是记了忘,忘了百度.在学一些新知识的时候也是这样的毛病,总是重复学习,这样效率真心差!所以决定开始认真写博客! 本来想封装一个预加载的 ...