使用方法 : 在两个input标签内的value赋值即可完成分页初始化,每点击以下就会跳转当前url+page=跳转的页数;
效果图:
注: 需引入jQuery
代码如下:
html:
<div id="page" class="page_div"></div>
<!-- 初始化当前页 -->
<input type="hidden" name='current_page' value='5'>
<!-- 初始化总页数 -->
<input type="hidden" name='total_page' value='40'>
页面添加js:
// 初始化
// 当前页
var current_page = $("input[name='current_page']").val();
// 总页数
var total_page = $("input[name='total_page']").val();
var a = parseInt(current_page);
var b = parseInt(total_page);
var back = 'back';
var next = 'next';
var end = 'end';
//分页
$("#page").paging({
pageNo: a,
totalPage: b,
// totalSize: 300,
callback: function(num) {
// alert(num)
}
})
// 只有一页时隐藏分页
if(total_page == '1'){
$("#page").hide();
}
css:
* {
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;
}
.go_page {
min-width: 30px;
height: 28px;
border: 1px solid #dce0e0!important;
width: 30px;
}
#go_cl {
color: #0073A9;
border: 1px solid #0073A9!important;
}
js:
(function($, window, document, undefined) {
function Paging(element, options) {
this.element = element;
this.options = {
pageNo: options.pageNo || 1,
totalPage: options.totalPage,
totalSize: options.totalSize,
callback: options.callback
};
this.init();
}
Paging.prototype = {
constructor: Paging,
init: function() {
this.creatHtml();
this.bindEvent();
},
creatHtml: function() {
var me = this;
var content = "";
var current = me.options.pageNo;
var total = me.options.totalPage;
var totalNum = me.options.totalSize;
content += "<a id=\"firstPage\" onclick='asd(1)'>首页</a><a id='prePage' onclick='asd(back)'>上一页</a>";
if(total > 6) {
if(current < 5) {
for(var i = 1; i < 6; i++) {
if(current == i) {
content += "<a class='current' >" + i + "</a>";
} else {
content += "<a onclick='asd(" + i + ")'>" + i + "</a>";
}
}
content += ". . .";
content += "<a onclick='asd(" + total + ")'>" + total + "</a>";
} else {
if(current < total - 3) {
for(var i = current - 2; i < current + 3; i++) {
if(current == i) {
content += "<a class='current'>" + i + "</a>";
} else {
content += "<a onclick='asd(" + i + ")'>" + i + "</a>";
}
}
content += ". . .";
content += "<a onclick='asd(" + total + ")'>" + total + "</a>";
} else {
content += "<a onclick='asd(1)'>1</a>";
content += ". . .";
for(var i = total - 4; i < total + 1; i++) {
if(current == i) {
content += "<a class='current'>" + i + "</a>";
} else {
content += "<a onclick='asd(" + i + ")'>" + i + "</a>";
}
}
}
}
} else {
for(var i = 1; i < total + 1; i++) {
if(current == i) {
content += "<a class='current'>" + i + "</a>";
} else {
content += "<a onclick='asd(" + i + ")'>" + i + "</a>";
}
}
}
content += "<a id='nextPage' onclick='asd(next)'>下一页</a>";
content += "<a id=\"lastPage\" onclick='asd(total_page)'>尾页</a> <input type='text' class='go_page' /> <a id='go_cl' onclick='go_page()'>go</a>";
me.element.html(content);
},
bindEvent: function() {
var me = this;
me.element.off('click', 'a');
me.element.on('click', 'a', function() {
var num = $(this).html();
var id = $(this).attr("id");
if(id == "prePage") {
if(me.options.pageNo == 1) {
me.options.pageNo = 1;
} else {
me.options.pageNo = +me.options.pageNo - 1;
}
} else if(id == "nextPage") {
if(me.options.pageNo == me.options.totalPage) {
me.options.pageNo = me.options.totalPage
} else {
me.options.pageNo = +me.options.pageNo + 1;
}
} else if(id == "firstPage") {
me.options.pageNo = 1;
} else if(id == "lastPage") {
me.options.pageNo = me.options.totalPage;
} else {
me.options.pageNo = +num;
}
me.creatHtml();
if(me.options.callback) {
me.options.callback(me.options.pageNo);
}
});
}
};
$.fn.paging = function(options) {
return new Paging($(this), options);
}
})(jQuery, window, document);
// 页面跳转
function asd(page) {
var current = $('.current').html();
if(page == 'back') {
current--;
if(current == 0) {
return false;
}
let url = window.location.href;
if(url.indexOf("?") > 0) {
var urls = new Array(); //定义一数组
urls = url.split("?"); //字符分割
url = urls[0];
}
// 跳转
window.location.href = url + '?page=' + current;
} else if(page == 'next') {
current++;
if(current > b) {
return false;
}
let url = window.location.href;
if(url.indexOf("?") > 0) {
var urls = new Array(); //定义一数组
urls = url.split("?"); //字符分割
url = urls[0];
}
// 跳转
window.location.href = url + '?page=' + current;
} else {
let url = window.location.href;
if(url.indexOf("?") > 0) {
var urls = new Array(); //定义一数组
urls = url.split("?"); //字符分割
url = urls[0];
}
// 跳转
window.location.href = url + '?page=' + page;
}
}
// 根据页数跳转
function go_page() {
var go_page = $('.go_page').val();
console.log(go_page);
if(go_page == '') {
console.log(11)
}
let url = window.location.href;
if(url.indexOf("?") > 0) {
var urls = new Array(); //定义一数组
urls = url.split("?"); //字符分割
url = urls[0];
}
// 跳转
window.location.href = url + '?page=' + go_page;
}