Jquery前端分页插件pagination使用
插件描述：JqueryPagination是一个轻量级的jquery分页插件。只需几个简单的配置就可以生成分页控件。并且支持ajax获取数据，自定义请求参数，提供多种方法，事件和回调函数，功能全面的分页插件。
jQuery Pagination分页插件：下载：http://www.jq22.com/jquery-info5697
步骤一：导入相关的jquery和pagination文件
<script src="js/jquery-1.11.3.js"></script>
<!--分页-->
<link rel="stylesheet" href="css/pagination.css" />
<script type="text/javascript" src="js/jquery.pagination.js"></script>
步骤二：HTML代码：
非常简单只需要一个div标签
<div class="setPageDiv">
<div class="Pagination" id="pagination"></div>
</div>
步骤三： JS代码：
$('.Pagination').pagination(pageNum, {
num_edge_entries: 1, //边缘页数
num_display_entries: 4, //主体页数
items_per_page: 1, //每页显示1项
prev_text: "上一页",
next_text: "下一页",
});
完整代码实例展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/jquery-1.11.3.js"></script>
<!--分页-->
<link rel="stylesheet" href="css/pagination.css" />
<script type="text/javascript" src="js/jquery.pagination.js"></script>
<style>
.setPageDiv {
width: 1100px;
margin: auto;
margin-bottom: 91px;
margin-top: 37px;
}
#pagination {
margin: auto;
margin-left: 100px;
}
.img-responsive {
width: 30px;
height: 30px;
}
</style>
</head>
<body>
<div class="zxdong">
<div class="zxdong_inner">
<ul style="margin-left: 100px;">
<!--<div class='row'>
<div class='col-md-1 col-xs-1'>
<img src='" + img + "'/ class='img-responsive'>
</div>
<div class='col-md-3 col-xs-3'>
<p>11111111111111111 </p>
</div></div>-->
<div class="list">
</div>
</ul>
</div>
</div>
<div class="setPageDiv">
<div class="Pagination" id="pagination"></div>
</div>
</body>
<script>
//分页
$(function() {
$('.setPageDiv').change(function() {
getMsg(parseInt($(this).val()))
})
function getMsg(num) {
$.ajax({
url: 'data/bussiness.json',
type: 'GET',
dataType: 'json',
success: function(data) {
//1.计算分页数量
var showNum = num;
var dataL = data.list.length;
var pageNum = Math.ceil(dataL / showNum);
$('.Pagination').pagination(pageNum, {
num_edge_entries: 1, //边缘页数
num_display_entries: 4, //主体页数
items_per_page: 1, //每页显示1项
prev_text: "上一页",
next_text: "下一页",
callback: function(index) {
//console.log(index);
var html = '<ul>'
console.log(showNum * index + '~' + parseInt(showNum * index) + parseInt(showNum))
for(var i = showNum * index; i < showNum * index + showNum; i++) {
//console.log(i)
if(i < dataL) {
var img = data.list[i].img;
var manager = data.list[i].manager; //交易类型
html += "<div class='row'>";
html += "<div class='col-md-1 col-xs-1'>"
html += "<img src='" + img + "'/ class='img-responsive'>"
html += "</div>"
html += "<div class='col-md-3 col-xs-3'>"
html += "<p>" + manager + "</p>"
html += "</div></div>";
}
}
html += '</ul>';
$('.list').html(html)
}
})
}
})
}
getMsg(6)
})
</script>
</html>
数据格式:bussiness.json
{
"list": [
{
"img":"img/dingwei.png",
"manager": "新店开业刷刷送豪礼"
}, {
"img": "img/dingwei.png",
"manager": "文史楼108"
},
{
"img": "img/dingwei.png",
"manager": "文史楼108"
},
{
"img": "img/dingwei.png",
"manager": "文史楼108"
},
{
"img": "img/dingwei.png",
"manager": "文史楼108"
}
]
}
文末福利：
福利一：前端，Java，产品经理，微信小程序，Python等资源合集大放送：https://www.jianshu.com/p/e8197d4d9880
福利二：微信小程序入门与实战全套详细视频教程
领取方式：
如果需要学习视频，欢迎关注 【编程微刊】微信公众号，回复【领取资源】一键领取以下所有干货资源，获取更多有用技术干货、文档资料。所有文档会持续更新，欢迎关注一起成长！
原文作者：祈澈姑娘
原文链接：https://www.jianshu.com/u/05f416aefbe1
创作不易，转载请告知
90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
自荐前端干货：
进阶攻略|前端最全的框架总结：https://www.jianshu.com/p/2a8ce7075d79
web开发快速提高工作效率的一些资源：https://www.jianshu.com/p/3cede64e87e5
前端学习的几个网站：https://www.jianshu.com/p/c36463dd56db
老司机程序员用到的各种网站整理：https://www.jianshu.com/p/c806eabe5bec
进阶攻略|前端完整的学习路线：https://www.jianshu.com/p/ed50ee3889d4
八款前端开发人员更轻松的实用在线工具：https://www.jianshu.com/p/267a01fb8bdb
前端几个常用简单的开发手册拿走不谢：https://www.jianshu.com/p/fd9689046a9b
程序员常用的六大技术博客类：https://www.jianshu.com/p/d1614f890282
九款优秀的企业项目协作工具推荐：https://www.jianshu.com/p/7df25e438610
移动端手势的七个事件库：https://www.jianshu.com/p/0754d5daa27e
Bootstrap相关优质项目学习清单：https://www.jianshu.com/p/80d229e7fedc
2018前端越来越流行的的技术：https://www.jianshu.com/p/d4af2aa96cee
Jquery前端分页插件pagination使用的更多相关文章
- Jquery前端分页插件pagination同步加载和异步加载
上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...
- 前端分页插件pagination
摘要: 最近在开发项目中又用到了前端分页,以前也做过,为了方便以后使用所以将他封装成第三方插件,不依赖任何库.网上已经有很多插件,问什么还要自己造轮子? 自己写的扩展性高 不依赖任何库 作为一次技术沉 ...
- 转：精心挑选的12款优秀 jQuery Ajax 分页插件和教程
在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 ...
- Vue2.0 分页插件pagination使用详细说明
Vue2.0 分页pagination使用 插件下载地址:Vue_Pagination 插件描述:基于jQuery的分页插件大家都用过很多了吧,今天分享一下基于Vue的分页插件pagination.j ...
- 12款优秀 jQuery Ajax 分页插件和教程
12款优秀 jQuery Ajax 分页插件和教程 在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 W ...
- Jquery的分页插件
Jquery的分页插件, 用起来还不错. 来自: http://flaviusmatis.github.io/simplePagination.js/ 下载地址: https://github.c ...
- jQuery插件实例六:jQuery 前端分页
先来看看效果: 对于前端分页,关键是思路,和分页算法.本想多说两句,可又觉得没什么可说的,看代码吧: 如何使用? $("#pging").zPagination({ 'navEve ...
- 精心挑选的12款优秀 jQuery Ajax 分页插件和教程
在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 ...
- 12款优秀jQuery Ajax分页插件和教程
在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 ...
随机推荐
- 使用 Go 语言开发大型 MMORPG 游戏服务器怎么样？（非常稳定、捕获所有异常、非常适合从头开始，但大公司已经有现成的C++框架、所以不会使用）
使用 Go 语言开发大型 MMORPG 游戏服务器怎么样?和C Socket服务器比起来有什么优劣?可行性怎么样? 从2013年起,经朋友推荐开始用Golang编写游戏登陆服务器, 配合C++做第三方 ...
- amazeui学习笔记一（开始使用1）--主干
amazeui学习笔记一(开始使用1)--主干 一.总结 1.英语:学好英语,编程轻松很多 2. layouts compatibility change log web app collection ...
- 数值溢出（arithmetic overflow）问题与解决方案
0. 典型场景 两数相加(乘法).两数相减.一个数的阶乘,一个数的幂,这些统统可能造成数值的溢出: 避免数值溢出的方法: 当把一个计算出的很大的数赋值给一个 int(2^31-1)类型变量存储时,一般 ...
- android 4.4 添加物理按键
kernel下添加 Linux-3.4/drivers/input/keyboard/Makefile linux-3.4/drivers/input/keyboard/sw-keyboard.c s ...
- scrapy--介绍
Scrapy一个开源和协作的框架,其最初是为了页面抓取所设计的,使用它可以以快速.简单.可扩展的方式从网站中提取所需的数据.但目前Scrapy的用途十分广泛,可用于如数据挖掘.监测和自动化测试等领 ...
- [置顶]
WebService学习总结（4）——第三方webService服务调用
互联网上面有很多的免费webService服务,我们可以调用这些免费的WebService服务,将一些其他网站的内容信息集成到我们的Web应用中显示,下面就以获取天气预报数据和查询国内手机号码归属地为 ...
- Altium Designer中DRC错误分析
- Codeforces Round #258 (Div. 2)——B. Sort the Array
B. Sort the Array time limit per test 1 second memory limit per test 256 megabytes input standard in ...
- linux cmd cp -a
cp -a 在保留原文件属性的前提下复制文件 cp -r dirname destdir 复制目录后其文件属性会发生变化 想要使得复制之后的目录和原目录完全一样,可以使用cp -a dirn ...
- HDU - 4552 怪盗基德的挑战书 (后缀数组)
Description "在树最漂亮的那天,当时间老人再次把大钟平均分开时,我会降临在灯火之城的金字塔前.带走那最珍贵的笑容."这是怪盗基德盗取巴黎卢浮宫的<蒙娜丽莎的微笑& ...