jquery插件pagination实现无刷新ajax分页_jquery

来源：动视网责编：小采时间：2020-11-27 21:44:12

jquery插件pagination实现无刷新ajax分页_jquery

jquery插件pagination实现无刷新ajax分页_jquery:1、前台使用ajax无刷新分页，主要需要生成分页的工具条，这里使用的是jquery.pagination.js 插件参数可以参考----张龙豪-jquery.pagination.js分页下面贴出代码 /** * This jQuery plugin displays pagination links

推荐度：

点击下载本文 文档为doc格式

导读jquery插件pagination实现无刷新ajax分页_jquery:1、前台使用ajax无刷新分页，主要需要生成分页的工具条，这里使用的是jquery.pagination.js 插件参数可以参考----张龙豪-jquery.pagination.js分页下面贴出代码 /** * This jQuery plugin displays pagination links

1、前台使用ajax无刷新分页，主要需要生成分页的工具条，这里使用的是jquery.pagination.js

插件参数可以参考----张龙豪-jquery.pagination.js分页

下面贴出代码

代码还是比较容易看明白的，可以根据自己需要修改，这里使用的是自己的样式

样式代码

 .pages {display: inline-block; overflow: hidden;padding: px ;text-align: center; width:%; margin:px ;}
 .pages b{ color:#ef;}
 .pages a { color:#; border: px solid #eee;cursor: pointer;font-size: px;margin-right: px; padding: px px; text-decoration: none; background-color:#fafafa;}
 .pages .currentPage{ background-color: #ae; border: px solid #ae;color: #fff; font-weight: bold;}

原来的css样式：

 .pagination a {
 text-decoration: none;
 border: px solid #AAE;
 color: #B;
 }
 
 .pagination a, .pagination span {
 display: inline-block;
 padding: .em .em;
 margin-right: px;
 margin-bottom: px;
 }
 
 .pagination .current {
 background: #B;
 color: #fff;
 border: px solid #AAE;
 }
 
 .pagination .current.prev, .pagination .current.next{
 color:#;
 border-color:#;
 background:#fff;
 }

可以根据自己设计显示样式

2、使用方法

2.1、html显示

ulProducts中放的是要显示的数据，生成的分页的工具条是放在Pagination中的

2.2 javascript代码

searchMyme是获取分页的数据，将总数放到一个隐藏的控件中，总数分页控件需要使用，这里ajax调用需要同步执行，不然取不到返回的总数
pageInit() 就是初始化控件

这样设置基本就OK了~