快速掌握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实现瀑布流页面
Apr 11 jQuery
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
jQuery 表单序列化实例代码
Jun 11 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
jQuery实现高级检索功能
May 28 jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
JQuery复选框全选效果如何实现
May 08 jQuery
jQuery+ajax实现用户登录验证
Sep 13 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.ini中date.timezone设置分析
2011/07/29 PHP
PHP中date与gmdate的区别及默认时区设置
2014/05/12 PHP
PHP 5.3新增魔术方法__invoke概述
2014/07/23 PHP
PHP脚本监控Nginx 502错误并自动重启php-fpm
2015/05/13 PHP
php数据库操作model类(使用__call方法)
2016/11/16 PHP
php中namespace及use用法分析
2016/12/06 PHP
php字符集转换
2017/01/23 PHP
Yii 2.0实现联表查询加搜索分页的方法示例
2017/08/02 PHP
PHP中实现中文字串截取无乱码的解决方法
2018/05/29 PHP
JavaScript Prototype对象
2009/01/07 Javascript
js切换光标示例代码
2013/10/10 Javascript
SpringMVC返回json数据的三种方式
2015/12/10 Javascript
JS button按钮实现submit按钮提交效果
2016/11/01 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
2016/12/27 Javascript
jQuery中绑定事件bind() on() live() one()的异同
2017/02/23 Javascript
js 奇葩技巧之隐藏代码
2017/08/11 Javascript
第一个Vue插件从封装到发布
2017/11/22 Javascript
将jquery.qqFace.js表情转换成微信的字符码
2017/12/01 jQuery
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
vue项目引入字体.ttf的方法
2018/09/28 Javascript
Vue使用NPM方式搭建项目
2018/10/25 Javascript
详解微信小程序自定义组件的实现及数据交互
2019/07/22 Javascript
node-red File读取好保存实例讲解
2019/09/11 Javascript
javascript 数组(list)添加/删除的实现
2020/12/17 Javascript
[02:02]DOTA2英雄基础教程 斯拉达
2013/12/11 DOTA
[02:41]DOTA2英雄基础教程 谜团
2013/12/10 DOTA
浅谈dataframe中更改列属性的方法
2018/07/10 Python
pygame游戏之旅 添加游戏暂停功能
2018/11/21 Python
python_matplotlib改变横坐标和纵坐标上的刻度(ticks)方式
2020/05/16 Python
浅谈html5增强的页面元素
2016/06/14 HTML / CSS
Notino意大利:购买香水和化妆品
2018/11/14 全球购物
商场客服专员岗位职责
2014/06/13 职场文书
村党建工作汇报材料
2014/11/02 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
科学家测试在太空中培育人造肉,用于未来太空旅行
2022/04/29 数码科技