js实现分页代码粘贴
2017-03-17 00:00
288 查看
摘要: js
1、对应的html页面
<link href="css/jsPage.css" rel="stylesheet">
</head>
<body>
<div class="page-list">
<div class="content">
</div>
<div class="showpage">
<ul class="page" id="page">
</ul>
</div>
</div>
<script src="../lib/js/jquery-1.12.4.min.js"></script>
<script src="js/jsPage.js"></script>
</body>
2、对应的css页面
.page-list {
margin: 0 auto;
width: 800px;
height: 400px;
border: 1px solid #000;
}
.content {
width: 100%;
height: 300px;
text-align: center;
line-height: 300px;
font-size: 20px;
min-height: 300px;
overflow: auto;
}
* {
margin: 0px;
padding: 0px;
}
ul li {
list-style: none;
}
a {
text-decoration: none
}
.showpage {
text-align: center;
}
ul li {
display: inline-block;
height: 60px;
line-height: 60px;
}
.changepage,
.next_page,
.back_page {
display: inline-block;
border: 1px solid #666;
height: 20px;
text-align: center;
line-height: 20px;
min-width: 20px;
color: #333;
margin: 0px 5px;
}
.active {
background: rosybrown;
}
.detail_name {
margin: 10px auto;
background: #666;
width: 200px;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
}
#input_number {
width: 40px;
}
3、对应的js
$(function() {
dataPage.init(); //进行数据初始化加载
});
var dataPage = {
currentpage: 1,
showTip: 6, //每一页中需要显示的条数
init: function() {
this.onloadData(this.currentpage);
},
onloadData: function(currentpage) { //进行初始化数据的加载
var _this = this;
$.ajax({
type: 'POST',
url: 'css/jsPage.json', //请求的url地址
dataType: 'json',
async: false,
success: function(data) {
//返回值在进行访问抽取的方法，从后台返回,获取当前第一页数据，每一页显示2条数据
var allData = data.row;
var allpage = _this.getPage(allData.length, _this.showTip);
$(".content").html("");
var _showData = "";
if (currentpage == 1) {
for (var i = 0; i < _this.showTip; i++) {
_showData += ' <div class="detail_name"><span>' + allData[i].name + '</span><span>' + allData[i].age + '</span></div>';
}
} else if (allpage != currentpage) {
for (var i = 0; i < _this.showTip; i++) {
_showData += ' <div class="detail_name"><span>' + allData[parseInt(_this.showTip * parseInt(currentpage - 1) + i)].name + '</span><span>' + allData[parseInt(_this.showTip * parseInt(currentpage - 1) + i)].age + '</span></div>';
}
} else {
var maxlength = parseInt(allData.length) - _this.showTip * parseInt(currentpage - 1);
for (var i = 0; i < maxlength; i++) {
_showData += ' <div class="detail_name"><span>' + allData[parseInt(_this.showTip * parseInt(currentpage - 1) + i)].name + '</span><span>' + allData[parseInt(_this.showTip * parseInt(currentpage - 1) + i)].age + '</span></div>';
}
}
$(".content").append(_showData);
_this.commonPage(parseInt(allpage), currentpage); //传入分页后的数据，总页数，当前页
}
});
},
commonPage: function(pageNum, currentpage) { //进行或得到的数据，进行重新组合成分页的形式
var _this = this;
if (pageNum > 0) {
$(".page").html("");
var page = "";
//首页，仅在当前页大于等于4 且 总页码大于等于6的情况下出现‘首页’，
if (currentpage >= 4 && pageNum >= 6) {
page += '<li class="first_page"><a href="#" >首页</a></li>';
}
//当前页大于2的时候出现上一页
if (currentpage >= 2) {
page += '<li class="back_page "><a href="#" >上一页</a></li>';
}
//5个页码，分两种情况，一是总页码小于等于5，二是总页码大于5，
if (pageNum <= 5) {
for (var i = 1; i <= pageNum; i++) {
if (currentpage == i) {
page += '<li class="active changepage"> <a href = "#">' + i + '</a></li>';
} else {
page += '<li class="changepage" > <a href = "#">' + i + '</a></li>'
}
}
} else {
//总共有10页
for (var i = 1; i < 5; i++) {
if (currentpage < 3) { //当前页数小于3的时候
if (currentpage == i) {
page += '<li class="active changepage"> <a href = "#">' + i + '</a></li>';
} else {
page += '<li class="changepage" > <a href = "#">' + i + '</a></li>'
}
} else if (currentpage > (parseInt(pageNum) - 2)) { //当前值为最后两个数值
if (currentpage == (parseInt(pageNum) + i - 4)) {
page += '<li class="active changepage"> <a href = "#">' + parseInt(parseInt(pageNum) + i - 4) + '</a></li>';
} else {
page += '<li class="changepage" > <a href = "#">' + parseInt(parseInt(pageNum) + i - 4) + '</a></li>'
}
} else {
if (i == 3) {
page += '<li class="active changepage"> <a href = "#">' + parseInt(parseInt(currentpage) - 3 + i) + '</a></li>';
} else {
page += '<li class="changepage" > <a href = "#">' + parseInt(parseInt(currentpage) - 3 + i) + '</a></li>'
}
}
}
}
//下一页，当前值不等于总页码数且总页码数大于等于2的情况下
if (pageNum - currentpage >= 1) {
page += '<li class="next_page"><a href="#">下一页</a></li>';
}
//尾页，当总页码比当前页至少大3，且总页码数大于等于6的情况下出现，图⑧
if ((pageNum - currentpage) >= 3 && pageNum >= 6) {
page += '<li class="last_page"><a href="#">尾页</a></li>';
}
page += '<li >共' + pageNum + '页</li>';
$(".page").append(page);
$(".changepage").click(function() {
$(".changepage").removeClass("active");
$(this).addClass("active");
var pagenumber = $(this).find("a").eq(0).text(); //获取当前页数
_this.onloadData(parseInt(pagenumber));
});
$(".next_page").click(function() {
var pagenumber = $(".active").find("a").eq(0).text(); //获取当前页数
if (pagenumber != pageNum) {
_this.onloadData(parseInt(pagenumber) + 1);
}
});
$(".back_page").click(function() {
var pagenumber = $(".active").find("a").eq(0).text(); //获取当前页数
if (pagenumber != 1) {
_this.onloadData(parseInt(pagenumber) - 1);
}
});
$(".first_page").click(function() {
_this.onloadData(1); //首页
});
$(".last_page").click(function() {
_this.onloadData(parseInt(pageNum)); //尾页
});
}
},
getPage: function(data_length, showTip) { //根据数据的总长度和展示的条数，进行计算总页数
var num = "" + data_length / showTip;
if (num.indexOf(".") > 0) {
return num = parseInt(data_length / showTip) + 1;
} else {
return num = parseInt(data_length / showTip);
}
}
}
1、对应的html页面
<link href="css/jsPage.css" rel="stylesheet">
</head>
<body>
<div class="page-list">
<div class="content">
</div>
<div class="showpage">
<ul class="page" id="page">
</ul>
</div>
</div>
<script src="../lib/js/jquery-1.12.4.min.js"></script>
<script src="js/jsPage.js"></script>
</body>
2、对应的css页面
.page-list {
margin: 0 auto;
width: 800px;
height: 400px;
border: 1px solid #000;
}
.content {
width: 100%;
height: 300px;
text-align: center;
line-height: 300px;
font-size: 20px;
min-height: 300px;
overflow: auto;
}
* {
margin: 0px;
padding: 0px;
}
ul li {
list-style: none;
}
a {
text-decoration: none
}
.showpage {
text-align: center;
}
ul li {
display: inline-block;
height: 60px;
line-height: 60px;
}
.changepage,
.next_page,
.back_page {
display: inline-block;
border: 1px solid #666;
height: 20px;
text-align: center;
line-height: 20px;
min-width: 20px;
color: #333;
margin: 0px 5px;
}
.active {
background: rosybrown;
}
.detail_name {
margin: 10px auto;
background: #666;
width: 200px;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
}
#input_number {
width: 40px;
}
3、对应的js
$(function() {
dataPage.init(); //进行数据初始化加载
});
var dataPage = {
currentpage: 1,
showTip: 6, //每一页中需要显示的条数
init: function() {
this.onloadData(this.currentpage);
},
onloadData: function(currentpage) { //进行初始化数据的加载
var _this = this;
$.ajax({
type: 'POST',
url: 'css/jsPage.json', //请求的url地址
dataType: 'json',
async: false,
success: function(data) {
//返回值在进行访问抽取的方法，从后台返回,获取当前第一页数据，每一页显示2条数据
var allData = data.row;
var allpage = _this.getPage(allData.length, _this.showTip);
$(".content").html("");
var _showData = "";
if (currentpage == 1) {
for (var i = 0; i < _this.showTip; i++) {
_showData += ' <div class="detail_name"><span>' + allData[i].name + '</span><span>' + allData[i].age + '</span></div>';
}
} else if (allpage != currentpage) {
for (var i = 0; i < _this.showTip; i++) {
_showData += ' <div class="detail_name"><span>' + allData[parseInt(_this.showTip * parseInt(currentpage - 1) + i)].name + '</span><span>' + allData[parseInt(_this.showTip * parseInt(currentpage - 1) + i)].age + '</span></div>';
}
} else {
var maxlength = parseInt(allData.length) - _this.showTip * parseInt(currentpage - 1);
for (var i = 0; i < maxlength; i++) {
_showData += ' <div class="detail_name"><span>' + allData[parseInt(_this.showTip * parseInt(currentpage - 1) + i)].name + '</span><span>' + allData[parseInt(_this.showTip * parseInt(currentpage - 1) + i)].age + '</span></div>';
}
}
$(".content").append(_showData);
_this.commonPage(parseInt(allpage), currentpage); //传入分页后的数据，总页数，当前页
}
});
},
commonPage: function(pageNum, currentpage) { //进行或得到的数据，进行重新组合成分页的形式
var _this = this;
if (pageNum > 0) {
$(".page").html("");
var page = "";
//首页，仅在当前页大于等于4 且 总页码大于等于6的情况下出现‘首页’，
if (currentpage >= 4 && pageNum >= 6) {
page += '<li class="first_page"><a href="#" >首页</a></li>';
}
//当前页大于2的时候出现上一页
if (currentpage >= 2) {
page += '<li class="back_page "><a href="#" >上一页</a></li>';
}
//5个页码，分两种情况，一是总页码小于等于5，二是总页码大于5，
if (pageNum <= 5) {
for (var i = 1; i <= pageNum; i++) {
if (currentpage == i) {
page += '<li class="active changepage"> <a href = "#">' + i + '</a></li>';
} else {
page += '<li class="changepage" > <a href = "#">' + i + '</a></li>'
}
}
} else {
//总共有10页
for (var i = 1; i < 5; i++) {
if (currentpage < 3) { //当前页数小于3的时候
if (currentpage == i) {
page += '<li class="active changepage"> <a href = "#">' + i + '</a></li>';
} else {
page += '<li class="changepage" > <a href = "#">' + i + '</a></li>'
}
} else if (currentpage > (parseInt(pageNum) - 2)) { //当前值为最后两个数值
if (currentpage == (parseInt(pageNum) + i - 4)) {
page += '<li class="active changepage"> <a href = "#">' + parseInt(parseInt(pageNum) + i - 4) + '</a></li>';
} else {
page += '<li class="changepage" > <a href = "#">' + parseInt(parseInt(pageNum) + i - 4) + '</a></li>'
}
} else {
if (i == 3) {
page += '<li class="active changepage"> <a href = "#">' + parseInt(parseInt(currentpage) - 3 + i) + '</a></li>';
} else {
page += '<li class="changepage" > <a href = "#">' + parseInt(parseInt(currentpage) - 3 + i) + '</a></li>'
}
}
}
}
//下一页，当前值不等于总页码数且总页码数大于等于2的情况下
if (pageNum - currentpage >= 1) {
page += '<li class="next_page"><a href="#">下一页</a></li>';
}
//尾页，当总页码比当前页至少大3，且总页码数大于等于6的情况下出现，图⑧
if ((pageNum - currentpage) >= 3 && pageNum >= 6) {
page += '<li class="last_page"><a href="#">尾页</a></li>';
}
page += '<li >共' + pageNum + '页</li>';
$(".page").append(page);
$(".changepage").click(function() {
$(".changepage").removeClass("active");
$(this).addClass("active");
var pagenumber = $(this).find("a").eq(0).text(); //获取当前页数
_this.onloadData(parseInt(pagenumber));
});
$(".next_page").click(function() {
var pagenumber = $(".active").find("a").eq(0).text(); //获取当前页数
if (pagenumber != pageNum) {
_this.onloadData(parseInt(pagenumber) + 1);
}
});
$(".back_page").click(function() {
var pagenumber = $(".active").find("a").eq(0).text(); //获取当前页数
if (pagenumber != 1) {
_this.onloadData(parseInt(pagenumber) - 1);
}
});
$(".first_page").click(function() {
_this.onloadData(1); //首页
});
$(".last_page").click(function() {
_this.onloadData(parseInt(pageNum)); //尾页
});
}
},
getPage: function(data_length, showTip) { //根据数据的总长度和展示的条数，进行计算总页数
var num = "" + data_length / showTip;
if (num.indexOf(".") > 0) {
return num = parseInt(data_length / showTip) + 1;
} else {
return num = parseInt(data_length / showTip);
}
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 简单的分页代码js实现
- 原生JS实现排序和分页的代码
- js实现的分页代码
- js表格分页实现代码
- js 分页全选或反选标识实现代码
- angularjs+bootstrap实现自定义分页的实例代码
- Angular.js与Bootstrap相结合实现表格分页代码
- 客户端实现长文章静态分页的JS代码
- 无JS,完全php面向过程数据分页实现代码
- js下通过getList函数实现分页效果的代码
- js框架jquery实现分页效果代码下载
- 无JS,完全php面向过程数据分页实现代码
- js表格分页实现代码
- 纯JS前端实现分页代码
- 简单的分页代码js实现
- Angular.js与Bootstrap相结合实现表格分页代码
- js实现的分页代码
- JS实现分页浏览横向图片(类轮播)实例代码
- 无JS,完全php面向过程数据分页实现代码