快速掌握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简单绑定单个事件的方法示例
Jun 10 jQuery
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 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
php长字符串定义方法
2012/07/12 PHP
php连接mssql的一些相关经验及注意事项
2013/02/05 PHP
PHP学习笔记(一) 简单了解PHP
2014/08/04 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
中文字符串截取的js函数代码
2013/04/17 Javascript
JS隐藏参数post传值实例
2013/04/18 Javascript
初识SmartJS - AOP三剑客
2014/06/08 Javascript
jQuery中insertAfter()方法用法实例
2015/01/08 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
使用Browserify配合jQuery进行编程的超级指南
2015/07/28 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
2016/05/19 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
3分钟掌握常用的JS操作JSON方法总结
2017/04/25 Javascript
基于vue的换肤功能的示例代码
2017/10/10 Javascript
详解vue+webpack+express中间件接口使用
2018/07/17 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
2018/08/09 Javascript
js实现图片上传即时显示效果
2019/09/30 Javascript
vue项目中常见问题及解决方案(推荐)
2019/10/21 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
2021/01/19 Javascript
[01:18:45]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第三场2月1日
2021/03/11 DOTA
Python爬取网易云音乐上评论火爆的歌曲
2017/01/19 Python
DataFrame 将某列数据转为数组的方法
2018/04/13 Python
python实现音乐下载的统计
2018/06/20 Python
opencv3/C++实现视频背景去除建模(BSM)
2019/12/11 Python
Python 给下载文件显示进度条和下载时间的实现
2020/04/02 Python
Django的ListView超详细用法(含分页paginate)
2020/05/21 Python
Python with语句用法原理详解
2020/07/03 Python
马来西亚网上购物平台:ezbuy
2018/02/13 全球购物
大专生自我鉴定范文
2013/10/01 职场文书
文明礼仪事迹材料
2014/01/09 职场文书
大学军训通讯稿
2014/01/13 职场文书
《颐和园》教学反思
2014/02/26 职场文书
民族团结先进集体事迹材料
2014/05/22 职场文书
药剂专业毕业生求职信
2014/06/24 职场文书
运动会通讯稿100字
2015/07/20 职场文书