<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试多分页</title>
<style type="text/css">
body{
font-family: 'Microsoft YaHei';
}
.page-totalpage{
text-align: right;
}
.page-ul{
text-align: right;
}
.page-ul li:not(.jump-page):not(.page-record){
width: 35px;
height: 30px;
line-height: 30px;
text-align: center;
display: inline-block;
margin-top: 5px;
background-image: linear-gradient(45deg,#fdfdfd,#f7f7f7);
border: 1px solid #dddddd;
font-weight: bold;
border-radius: 2px;
color: #556270;
cursor: pointer;
margin-right: 10px;
list-style: none;
}
.page-ul li:not(.jump-page):not(.page-record):hover{
border: 1px solid #43505e;
border-radius: 2px;
background-image: linear-gradient(45deg,#535f6d,#454e59);
color: #fff;
}
.jump-page{
display: inline-block;
}
.page-text{
width: 22px;
height: 20px;
line-height: 20px;
text-align: center;
margin: 0 5px;
padding: 0;
vertical-align: text-top;
}
ul.page-ul>li.active{
border: 1px solid #43505e !important;
border-radius: 2px !important;
background-image: linear-gradient(45deg,#535f6d,#454e59) !important;
color: #fff !important;
}
ul.page-ul>li.disable{
color: #ccc !important;
cursor: not-allowed !important;
}
ul.page-ul li.disable:hover{
border: 1px solid #dddddd !important;
color: #ccc !important;
background-image: none !important;
cursor: not-allowed !important;
}
.jump-page a{
text-decoration: none;
color: #43505e;
font-weight: bold;
}
.jump-page a:hover{
text-decoration: underline;
}
.page-record{
display: inline-block;
padding: 0 10px;
color: #43505e;
font-weight: bold;
}
</style>
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
</head>
<body onselectstart="return false">
<div id="page-content-1"></div>
<hr>
<div id="page-content-2"></div>
<hr>
<div id="page-content-3"></div>
</body>
<script type="text/javascript">
;(function($){
function getPageList(currentPage,totalPage){
var pageList = new Array();
if(totalPage<=5){
for(var i = 0;i < totalPage; i++){
pageList[i] = i+1;
}
}else{
if(currentPage <= 2){
for(var i = 0;i < 5;i++){
pageList[i] = i + 1;
}
}
else if(currentPage > totalPage-2){
for(var i = 0;i < 5;i++){
pageList[i] = totalPage - 4 + i;
}
}
else{
for(var i = 0;i<5;i++){
pageList[i] = currentPage - 2 + i;
}
}
}
return pageList;
}
function getPageHtml(idNum,totalPage,pageList){
var strHtml = "<div id='page-totalpage-"+idNum+"' class='page-totalpage'>共<span>"+totalPage+"</span>条记录</div>"
strHtml += "<ul id='page-ul-"+idNum+"' class='page-ul'>";
strHtml += "<li class='font-page' id='font-page-"+idNum+"' data-page-num='1'><span>首页</span></li>";
strHtml += "<li class='forward-page' id='forward-page-"+idNum+"'><span><</span></li>";
for(var i = 0;i<pageList.length;i++){
strHtml += "<li class='page-"+pageList[i]+"'><span>"+pageList[i]+"</span></li>";
}
strHtml += "<li class='backward-page' id='backward-page-"+idNum+"'><span>></span></li>";
strHtml += "<li class='last-page' id='last-page-"+idNum+"' data-page-num="+totalPage+"><span>尾页</span></li>";
strHtml += "<li class='page-record'></li>";
strHtml += "<li class='jump-page'><span>转到<input type='text' class='page-text'>页 <a href='javascript:void(0);'>Go</a> </span></li></ul></div>";
return strHtml;
}
function setPage($this,idNum,currentPage,totalPage){
var forward_page_disable = null,
backward_page_disable = null;
$this.empty();
var list = getPageList(currentPage,totalPage);
$this.append(getPageHtml(idNum,totalPage,list));
$this.find(".page-"+currentPage).addClass("active");
$this.find(".page-record").text(currentPage+"/"+totalPage);
currentPage == 1 ? forward_page_disable = true : forward_page_disable = false ;
currentPage == totalPage ? backward_page_disable = true : backward_page_disable = false;
if(forward_page_disable){
$("#forward-page-"+idNum).addClass("disable");
}else{
$("#forward-page-"+idNum).removeClass("disable");
}
if(backward_page_disable){
$("#backward-page-"+idNum).addClass("disable");
}else{
$("#backward-page-"+idNum).removeClass("disable");
}
function setHash(hash,id,p){
if(hash == ''){
window.location.hash = "#id="+id+"&page="+p;
}else{
var hashList = hash.split("#");
var hash_ = '';
for(var i = 1;i<hashList.length;i++){
var id_ = hashList[i].split("&")[0].split("=")[1];
if(id == id_){
hash_ = "#"+hashList[i];
}
}
if(hash_!=''){
hash = hash.replace(hash_,"#id="+id+"&page="+p);
}else{
hash += "#id="+id+"&page="+p;
}
window.location.hash = hash;
}
}
setHash(window.location.hash,$this.attr("id"),currentPage);
}
$.fn.initPaging = function(opt){
var id = new Date().getTime();
var optDeafault = {
idNum: id,
totalPage: 10,
currentPage: 1,
pageResides: false,
func: function($div_content,currentPage,idNum){
console.log('默认函数');
console.log("三个参数,第一个是分页组件的父容器，第二个是当前页数，第三个是组件的idNum");
console.log("分页idNum为 "+idNum+" 的父容器是：<br>")
console.log($div_content);
console.log("分页idNum为 "+idNum+" 的当前页数是："+currentPage);
console.log("-------------------------------------------------------------");
}
};
var op = $.extend(optDeafault,opt);
if(op.pageResides){
var hash = window.location.hash;
if(hash == '' ){
setPage($(this),op.idNum,op.currentPage,op.totalPage);
}else{
var hashList = hash.split("#");
var currentPage = op.currentPage;
for(var i = 1;i<hashList.length;i++){
var id_ = hashList[i].split("&")[0].split("=")[1];
if($(this).attr("id") == id_){
currentPage = hashList[i].split("&")[1].split("=")[1];
break;
}
}
setPage($(this),op.idNum,currentPage,op.totalPage);
}
}else{
setPage($(this),op.idNum,op.currentPage,op.totalPage);
}
$(this).after("<div style='display:none'>"+op.func+"</div>");
return $(this);
}
$(window.document).on("click",".page-ul>li:not(.jump-page,.page-record)",function(){
if($(this).attr('class').indexOf("disable") >= 0){
return;
}
else{
var div_content = $(this).parent().parent();
var text = $(this).text().trim();
var idNum = $(this).parent().attr("id").split("-")[2];
if(text == '首页'){
currentPage = 1;
}
else if(text == '尾页'){
currentPage = parseInt($(this).attr("data-page-num"));
}
else if(text == '<'){
currentPage = parseInt(div_content.find(".active").text().trim())-1;
}
else if(text == '>'){
currentPage = parseInt(div_content.find(".active").text().trim())+1;
}
else{
currentPage = parseInt(text);
}
var totalPage = parseInt($("#page-totalpage-"+idNum+" span").text().trim());
setPage(div_content,idNum,currentPage,totalPage);
var s = div_content.next().text();
var f = new Function("return "+s);
f()(div_content,currentPage,idNum);
}
});
$(window.document).on("click",".jump-page a",function(){
var text = parseInt($(this).prev().val().trim());
var div_content = $(this).parents(".page-ul").parent();
var totalPage = div_content.find(".page-totalpage span").text();
if( text>0 && text<= totalPage){
var idNum = div_content.find(".page-totalpage").attr("id").split("-")[2];
var currentPage = text;
setPage(div_content,idNum,currentPage,totalPage);
div_content.find('.page-text').val(currentPage);
var s = div_content.next().text();
var f = new Function("return "+s);
f()(div_content,currentPage,idNum);
}
});
$(window.document).on("keydown",".page-text",function(e){
if(e.keyCode == 13){
$(this).next().trigger("click");
}
})
})(jQuery)
</script>
<script type="text/javascript">
$("#page-content-1").initPaging({
idNum: 1,
totalPage: 18,
currentPage: 1,
pageResides: true,
func: function($div_content,currentPage){
console.log('自定义当前分页函数');
console.log($div_content);
console.log('第一个分页的函数当前跳转页：'+currentPage);
console.log("-------------------------------------------------------------");
}
});
$("#page-content-2").initPaging({
idNum: 2,
totalPage: 4,
currentPage: 1,
func: function(){
alert('第二个分页的函数:guojia-2');
}
});
$("#page-content-3").initPaging();
if(window.location.hash != ''){
console.log(window.location.hash)
}
</script>
</html>