<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
/*
* 外面盒子样式---自己定义
*/
.page_div {
margin-top: 20px;
margin-bottom: 20px;
font-size: 15px;
font-family: "microsoft yahei";
color: #666666;
margin-right: 10px;
padding-left: 20px;
box-sizing: border-box;
}
/*
* 页数按钮样式
*/
.page_div a {
min-width: 30px;
height: 28px;
border: 1px solid #dce0e0!important;
text-align: center;
margin: 0 4px;
cursor: pointer;
line-height: 28px;
color: #666666;
font-size: 13px;
display: inline-block;
}
#firstPage,
#lastPage {
width: 50px;
color: #0073A9;
border: 1px solid #0073A9!important;
}
#prePage,
#nextPage {
width: 70px;
color: #0073A9;
border: 1px solid #0073A9!important;
}
.page_div .current {
background-color: #0073A9;
border-color: #0073A9;
color: #FFFFFF;
}
.totalPages {
margin: 0 10px;
}
.totalPages span,
.totalSize span {
color: #0073A9;
margin: 0 5px;
}
</style>
</head>
<body>
<div value="1 0"></div>
<div id="page" class="page_div"></div>
</body>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/paging.js"></script>
<script>
//分页
$("#page").paging({
pageNo:5,
totalPage: 9,
totalSize: 300,
callback: function(num) {
alert(num)
}
})
/*
// 模拟ajax数据用以下方法,方便用户更好的掌握用法
//参数为当前页
ajaxTest(1);
function ajaxTest(num) {
$.ajax({
url: "table.json",
type: "get",
data: {},
dataType: "json",
success: function(data) {
console.log(data);
//分页
$("#page").paging({
pageNo: num,
totalPage: data.totalPage,
totalSize: data.totalSize,
callback: function(num) {
ajaxTest(num)
}
})
}
})
}
*/
</script>
</html>
分页插件分页
需积分: 46 104 浏览量
2017-11-08
16:09:44
上传
评论
收藏 34KB ZIP 举报
孟夏草木长
- 粉丝: 45
- 资源: 55
最新资源
- STM32单片机FPGA毕设电路原理论文报告一种具有传统中医针刺补泻手法的新型智能电针仪设计
- 2023-04-06-项目笔记 - 第七十七阶段 - 4.4.2.75全局变量的作用域-75 -2024.03.19
- VuforiaObjectScanner-8-3-8.apk.1.1.1
- 上下班打卡_日报_20240201-20240319.xlsx
- 创业天下3.5.500.apk
- POD-data.mat
- ZF逆变器课程电子档及源码
- FileZilla-3.66.5-win64-sponsored2-setup
- SourceTreeSetup-3.4.17
- Docker Desktop Installer
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈