jQuery----分页插件实现
Posted SunLike阿理旺旺
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery----分页插件实现相关的知识，希望对你有一定的参考价值。
1、效果
2、html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery 分页插件</title>
<link rel="stylesheet" type="text/css" href="css/pagination.less">
</head>
<body>
<div class="pagination-container" id = \'pagination-container\'>
</div>
<script type="text/javascript" src=\'js/jquery-2.2.1.min.js\'></script>
<script type="text/javascript" src=\'js/pagination.js\'></script>
</body>
</html>
3、less代码
.pagination-container{
width: 800px;
height: 80px;
margin: 0 auto;
text-align: center;
.div{
height: 40px;
line-height: 30px;
margin: 0 auto;
div{
display: inline-block;
}
input,span,a{
margin: 0 10px 0 0;
}
input{
width: 40px;
height: 20px;
}
.search-page-btn{
height: 20px;
padding: 4px 10px;
background-color: #568DBD;
color: white;
border: 1px solid #568DBD;
&:hover{
background-color: #4681AF;
}
}
a{
padding: 6px 10px;
border: 1px solid #C5B7B7;
text-decoration: none;
color: #888888;
font-size: 12px;
&:hover{
border: 1px solid #568DBD;
}
}
.choose{
background-color: #568DBD;
color: white;
font-weight: bold;
}
}
}
4、jquery代码
var pagination = $("#pagination-container");
var now_page = 1;
var total_page = 30;
createPagination(pagination, now_page, total_page);
function createPagination(pagination, now_page, total_page) {
initPagination();
addPaginationEvent();
function initPagination() {
pagination.empty();
var lineOne = $("<div class = \'div\'>" +
"<span>当前页：</span>" +
"<span class=\'now-page num\'>" + now_page + "</span>" +
"<span>/</span>" +
"<span class=\'num total-page\'>" + total_page + "</span>" +
"<span>跳转到</span>" +
"<input type=\'number\' name=\'number\' class=\'jump-top-page\' value = \'" + now_page + "\' tabindex = \'1\'>" +
"<a href=\'#\' class=\'search-page-btn\'>确定</a>" +
"</div>");
pagination.append(lineOne);
var pageObj = $("<div class = \'div\'>" +
"<div class = \'left\'>" +
"<a href=\'#\' class=\'first-page\'>首页</a>" +
"<a href=\'#\' class=\'prev-page\'><上一页</a>" +
"</div>" +
"<div class = \'center\'>" +
"</div>" +
"<div class = \'right\'>" +
"<a href=\'#\' class=\'next-page\'>下一页></a>" +
"<a href=\'#\' class=\'last-page\'>尾页</a>" +
"</div>" +
"</div>");
pagination.append(pageObj);
fillNumberPage(1);
}
function addPaginationEvent() {
var searchBtn = pagination.find(".search-page-btn");
var firstPageBtn = pagination.find(".first-page");
var lastPageBtn = pagination.find(".last-page");
var prevPageBtn = pagination.find(".prev-page");
var nextPageBtn = pagination.find(".next-page");
var prevPagesBtn = pagination.find(".prev-pages");
var nextPagesBtn = pagination.find(".next-pages");
var searchVal = pagination.find(".jump-top-page");
searchBtn.on("click", function() {
var searchVal = pagination.find(".jump-top-page");
var page = parseInt(searchVal.val());
if (page <= total_page && page > 0) {
now_page = page;
fillNumberPage(page);
}
})
firstPageBtn.on("click", function() {
if (now_page != 1) {
fillNumberPage(1);
now_page = 1;
}
})
lastPageBtn.on("click", function() {
if (now_page != total_page) {
now_page = total_page;
fillNumberPage(total_page);
}
})
prevPageBtn.on("click", function() {
if (now_page > 1) {
now_page--;
fillNumberPage(now_page);
}
})
nextPageBtn.on("click", function() {
if (now_page < total_page) {
now_page++;
fillNumberPage(now_page);
}
})
pagination.on("click", ".page", function() {
var page = parseInt($(this).attr("data-page"));
now_page = page;
fillNumberPage(page);
})
$(document).on("keydown",function(event){
if(event.keyCode == \'13\'){
searchBtn.click();
}
})
}
function fillNumberPage(page) {
pagination.find(".center").empty();
pagination.find(".now-page").text(page);
pagination.find(".jump-top-page").val(page);
var start;
var end;
var p = page;
if (total_page <= 7) {
start = 1;
end = total_page;
}
else {
if (page <= 4) {
start = 1;
end = 7;
} else if (page > 4 && page < total_page - 4) {
start = page - 3;
end = page + 3;
} else {
start = total_page - 7;
end = total_page;
}
}
for (var i = start; i <= end; i++) {
var pageCenter = $("<a href=\'#\' class=\'page\' data-page = \'" + i + "\'>" + i + "</a>");
if (i == p) {
pageCenter.addClass("choose");
}
pagination.find(".center").append(pageCenter);
}
}
}
5、总结
将父节点，当前页，总页数传给创建函数就可以生成分页。
（还没加跳页的功能）
以上是关于jQuery----分页插件实现的主要内容，如果未能解决你的问题，请参考以下文章
jQuery 分页插件（jQuery.pagination.js）ajax 实现分页