快速掌握jquery分页插件jqPaginator的使用方法


Posted in jQuery onAugust 09, 2017

本文将为大家介绍一款非常赞的jQuery分页插件:jqPaginator。

jqPaginator简洁、高度自定义的jQuery分页组件,适用于多种应用场景。

简介

现在网上各种各样的分页组件很多,但是很难找到十分”称心如意”的,于是jqPaginator诞生了。

我心中理想的分页组件,要不受CSS框架限制,可以使用在各种不同风格中的网页中。以我浅显的经验来看,要达到这个目标,关键的一点就是高度自定义的Html结构。所以jqPaginator努力做到合理范围内的自定义,使其灵活的使用了各种不同的场景。

效果截图:

快速掌握jquery分页插件jqPaginator的使用方法

使用说明

例子

用法很简单,首先引入jQuery和jqPaginator,之后就可以初始化分页了

$('#id').jqPaginator({ totalPages: 100, visiblePages: 10, currentPage: 1, first: '<li class="first"><a href="javascript:void(0);">First</a></li>', prev: '<li class="prev"><a href="javascript:void(0);">Previous</a></li>', next: '<li class="next"><a href="javascript:void(0);">Next</a></li>', last: '<li class="last"><a href="javascript:void(0);">Last</a></li>', page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>', onPageChange: function (num) { $('#text').html('当前第' + num + '页'); } });

上例就是第一Demo,Bootstrap风格的分页。具体参数稍后介绍,这里要了解的是,如果使用的不是id,而是class,就会初始化该class的所有元素,实现上面”两个分页联动”的效果。

参数

快速掌握jquery分页插件jqPaginator的使用方法

扩展方法

jqPaginator提供了两个扩展方法,方便初始化后对组件进行操作。

$('#id').jqPaginator('option', options)

初始化后,动态修改配置

$('#id').jqPaginator('option', { currentPage: 1 });
$('#id').jqPaginator('destroy')

销毁jqPaginator

$('#id').jqPaginator('destroy');

相关资料

源码下载:https://github.com/keenwon/jqPaginator
官方地址:http://jqpaginator.keenwon.com/

推荐解决方案(结合后台):

首页通过一个具体后台查询跳转过来,带上总页数等数据,方便初始化分页导航条,并在table中显示第一页数据。
后续点击每一页按钮都发出ajax请求,并将该页数据作为json返回,填充到table中,这样做的好处是,不用每一次都查询总条数,只需要查询当前页面数据即可,速度快,减少数据库负担。具体代码如下,仅供参考:

<script type="text/javascript">
$(function(){
$('#page').jqPaginator({
//totalPages: 100,
pageSize:2,//每一页多少条记录
totalCounts:${totalCount},
visiblePages: 10,
currentPage: 1,

first: '<li class="first"><a href="javascript:void(0);">First</a></li>',
prev: '<li class="prev"><a href="javascript:void(0);">Previous</a></li>',
next: '<li class="next"><a href="javascript:void(0);">Next</a></li>',
last: '<li class="last"><a href="javascript:void(0);">Last</a></li>',
page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
onPageChange: function (num) {
// alert('当前第' + num + '页');
//此处可以ajax加载下一页数据
$.get('ajaxpage',{num:num},function(data){
$("#tab").html('<tr><th>书籍Id</th><th>书名</th><th>价格</th><th>操作</th></tr>');
for(var i=0;i<data.length;i++){

$("#tab").append('<tr><td>'+data[i].id+'</td><Td>'+data[i].bookName+'</Td><td>'+data[i].bookPrice+'</td>'+
'<td><a href="/test_maven/updateBook?id=${book.id }">修改</a> <a href="#">删除</a></td> </tr>');
}
},'json')
}
});
})

</script>
<title>Insert title here</title>
</head>
<body>
<h1>所有书籍</h1>
<table id="tab">
<tr><th>书籍Id</th><th>书名</th><th>价格</th><th>操作</th></tr>
<c:forEach items="${books }" var="book">

<tr><td>${book.id }</td><Td>${book.bookName }</Td><td>${book.bookPrice }</td>
<td><a href="/test_maven/updateBook?id=${book.id }">修改</a> <a href="#">删除</a></td>
</tr>

</c:forEach>


</table>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery zTree树插件动态加载实例代码
May 11 jQuery
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
基于jQuery的表单填充实例
Aug 22 jQuery
jQuery实现模糊查询的方法分析
May 10 jQuery
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
jquery.pager.js分页实现详解
Jul 29 jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
jQuery编写QQ简易聊天框
Aug 27 jQuery
jquery实现广告上下滚动效果
Mar 04 jQuery
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 #jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 #jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 #jQuery
jquery+css实现简单的图片轮播效果
Aug 07 #jQuery
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 #jQuery
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 #jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 #jQuery
You might like
实用函数2
2007/11/08 PHP
并发下常见的加锁及锁的PHP具体实现代码
2010/10/12 PHP
PHP-CGI远程代码执行漏洞分析与防范
2017/05/07 PHP
thinkphp5框架前后端分离项目实现分页功能的方法分析
2019/10/08 PHP
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
js对象之JS入门之Array对象操作小结
2011/01/09 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
jQuery中get和post方法传值测试及注意事项
2014/08/08 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
javascript实现微信分享
2014/12/23 Javascript
Javascript中的匿名函数与封装介绍
2015/03/15 Javascript
javascript实现类似java中getClass()得到对象类名的方法
2015/07/27 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
2016/03/05 Javascript
angular源码学习第一篇 setupModuleLoader方法
2016/10/20 Javascript
BootStrap整体框架之基础布局组件
2016/12/15 Javascript
详解vue-router 2.0 常用基础知识点之router-link
2017/05/10 Javascript
vue 表单验证按钮事件交由父组件触发的方法
2018/12/17 Javascript
js常用正则表达式集锦
2019/05/17 Javascript
解决layer.prompt无效的问题
2019/09/24 Javascript
Vue filter 过滤器、以及在table中的使用介绍
2020/09/07 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
2020/10/27 Javascript
Python Web框架Flask中使用新浪SAE云存储实例
2015/02/08 Python
Python编程中运用闭包时所需要注意的一些地方
2015/05/02 Python
Python过滤列表用法实例分析
2016/04/29 Python
Django 大文件下载实现过程解析
2019/08/01 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
Python基于mediainfo批量重命名图片文件
2020/12/29 Python
Hotels.com中国区:好订网
2016/08/18 全球购物
副护士长竞聘演讲稿
2014/04/30 职场文书
党员四风问题个人对照检查材料
2014/10/26 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
讲座通知范文
2015/04/23 职场文书
导师鉴定意见
2015/06/05 职场文书
学校证明范文
2015/06/24 职场文书
优秀教师主要事迹材料
2015/11/04 职场文书
2019年国庆祝福语(70句)
2019/09/19 职场文书