jquery分页,url分页,ajax分页

直接上码

1、加载jquery.js 和 page.js(源代码在下面第4点)

div #page 是用来装的

<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="./page.js"></script>

<div id="page"></div>

2、普通url分页

var a = page;
a.render({
    count:<?=$count?>, //数据总条数后端传来
    elem:"#page",
    url:"table.php",
    showSw:true,
    page:<?=$page?>, //当前页后端传来
    data:{
	search:'其他参数'
    }
});

3、ajax分页

var a = page;
$(document).ready(function(){
    $.ajax({
        url:"table.php",
        data:{page:1,limit:10},
        success(msg){
            //初始化分页
            a.render({
                count:msg.count,
                elem:"#page",
                ajax:true,
                url:"func"
            });
        }
    });
});

function func(data){
    console.log(data);
    $.ajax({
        url:"table.php",
        data:data,
        success(msg){
           ....
           a.render({page,data.page});  //修改当前页
        }
    });
}

4、page.js

参数介绍
url     //跳转路径 或者 函数名称 string 如 'a.php' | 'func'
elem    //分页对象 string 如 '#id' | '.class' | 'div'
page    //当前页 number 如 1
ajax    //是否是AJAX分页 boolean(true[是]|false[否])
data    //需要携带的参数  JSON 如 {a:1}
count   //数据总条数   number 如 999
limit   //每页数据条数  number 如 10|20
style   //样式 JSON 有默认样式
showSw  //是否开启首尾页 boolean(true[是]|false[否])
showSx  //是否开启上下页 boolean(true[是]|false[否])
showNo  //没有数据时显示 string 如 '没有数据' | ""
showTs  //是否显示数据提示 boolean(true[是]|false[否])
showNum //显示分页的个数*2 number 如 1|2|3 或者 string 如 'all' 显示所以页数

代码如下

page = {
	str : "",    //生成的html对象标签 如 '<a href="...">上一页</a><a>1</a>...<a>下一页</a>'
	url : "",
	elem : "",  
	page : 1,  
	ajax : false,
	data : "",  
	count : 0,   
	limit : 10, 
	pages : 0,  
	style : {   
	    "a" : {   //其他标签的默认样式
		"cursor" : "pointer",
		"float" : "left",
		"color" : "#1488F5",
		"text-decoration" : "none",
		"border" : "1px solid #1488F5",
		"height" : "22px",
		"line-height" : "22px",
		"padding" : "4px 10px",
		"margin" : "5px"
	    },
	    "no" : { //不能被选中时的标签的样式
		"color" : "#C3C3C3",
		"border-color" : "#C3C3C3",
		"cursor" : "no-drop"
	    },
	    "show_no" : {   //没有数据时的样式
		"color" : "#C3C3C3",
		"text-align" : "center"
	    },
	    "now" : {      //当前页标签的样式
		"color" :" white",
		"cursor" : "default",
		"background" : "#1488F5"
	    }
	},
	showSw : false, 
	showSx : true,  
	showNo : "",   
	showTs : false, 
	showNum : 2, 
	render(item){   //初始化赋值
	    for(var a in item){
	        if(a == "style"){
		    for(var b in item[a]){
		        this.style[b] = item[a][b];
		    }
		}else{
		    this[a] = item[a];
		}
	    }
	    this.pages = Math.ceil(this.count / this.limit);
	    this.set();
	},
	set(){
	    this.str = "";
	    if(this.count <= 0){  //没有数据不显示
	    $(this.elem).html("<p class='show_no'>" + this.showNo + "</p>");
		return;
	    }
	    var href = "";
		if(this.data){   //携带参数
		    if(!this.ajax){
			for(var a in this.data){
			    href+= "&" + a + "=" + this.data[a];
			}
		    }else{
		        this.data.limit = this.limit;
		    }
		}else{   //没有参数
		    if(this.ajax){
			this.data = {};
			this.data.limit = this.limit;
		    }
		}
		var show_shou = "";
		var show_wei = "";	
		if(this.showSw){   //开启显示首尾
		    if(this.ajax){   //ajax分页
			if(this.page == 1){
			    show_shou = "<a class='no'>首页</a>";
			}else{
			    this.data.page = 1;
			    show_shou = "<a href='javascript:" + this.url + "(" + JSON.stringify(this.data) + ")'>首页</a>";
			}
			if(this.page == this.pages){
			    show_wei = "<a class='no'>尾页</a>";
			}else{
			    this.data.page = this.pages;
                            show_wei = "<a href='javascript:" + this.url + "(" + JSON.stringify(this.data) + ")'>尾页</a>";
		        }
		    }else{   //超链接分页
			if(this.page == 1){
			    show_shou = "<a class='no'>首页</a>";
			}else{
			    show_shou = "<a href='" + this.url + "?page=1" + href + "'>首页</a>";
			}
			if(this.page == this.pages){
			    show_wei = "<a class='no'>尾页</a>";
			}else{
			    show_wei = "<a href='" + this.url + "?page=" + this.pages + href + "'>尾页</a>";
			}
		    }
					
		}
		this.str+= show_shou;
		var show_shang = "";
		var show_xia = "";	
		if(this.showSx){   //开启上下页
		    if(this.ajax){  //ajax分页
			if(this.page == 1){
			    show_shang = "<a class='no'>上一页</a>";
			}else{
			    this.data.page = this.page - 1;
			    show_shang = "<a href='javascript:" + this.url + "(" + JSON.stringify(this.data) + ")'>上一页</a>";
			}
			if(this.page == this.pages){
			    show_xia = "<a class='no'>下一页</a>";
			}else{
			    this.data.page = this.page + 1;
			    show_xia = "<a href='javascript:" + this.url + "(" + JSON.stringify(this.data) + ")'>下一页</a>";
			}
		    }else{   //超链接分页
			if(this.page == 1){
			    show_shang = "<a class='no'>上一页</a>";
			}else{
			    show_shang = "<a href='" + this.url + "?page=" + ( this.page - 1 ) + href + "'>上一页</a>";
			}
			if(this.page == this.pages){
			    show_xia = "<a class='no'>下一页</a>";
			}else{
			    show_xia = "<a href='" + this.url + "?page=" + ( this.page + 1 ) + href + "'>下一页</a>";
			}
		    }
		}

		this.str+= show_shang;
				
		var show_center = "";

		if(this.showNum == 'all'){   //显示所有页
		    if(this.ajax){
		        for(var a = 1; a < this.page; a++){
			    this.data.page = a;
			    show_center+= "<a href='javascript:" + this.url + "(" + JSON.stringify(this.data) + ")'>" + a + "</a>";
			}
			show_center+= "<a class='now'>" + this.page + "</a>";
			for(var a = this.page + 1; a <= this.pages; a++){
			    this.data.page = a;
			    show_center+= "<a href='javascript:" + this.url + "(" + JSON.stringify(this.data) + ")'>" + a + "</a>";
			}
		    }else{
			for(var a = 1; a < this.page; a++){
			    show_center+= "<a href='" + this.url + "?page=" + a + href + "'>" + a + "</a>";
		        }
			show_center+= "<a class='now'>" + this.page + "</a>";
			for(var a = this.page + 1; a <= this.pages; a++){
			    show_center+= "<a href='" + url + "?page=" + a + href + "'>" + a + "</a>";
			}
		    }
		}else{   //不显示所有页
		    if(this.ajax){
			if(this.page > this.pages){
			    show_center+= "<a class='no'>没有第" + this.page + "页</a>";
			}else{
			    if(this.showNum >= this.page){   //是前面的那几页
				for(var a = 1; a < this.page; a++){
				    this.data.page = a;
				    show_center+= "<a href='javascript:" + this.url + "(" + JSON.stringify(this.data) + ")'>" + a + "</a>";
			        }
			        show_center+= "<a class='now'>" + this.page + "</a>";
			        var cs = this.showNum * 2;
			        if(cs > this.pages){
				    cs = this.pages;
			        }
			        for(var a = this.page + 1; a <= cs; a++){                                       
                                    this.data.page = a;	
                                    show_center+= "<a href='javascript:" + this.url + "(" + JSON.stringify(this.data) + ")'>" + a + "</a>";
				}
			    }else if(this.pages - this.showNum <= this.page){   //是后面的那几页
				var cs = this.pages - this.showNum * 2;
				if(cs < 1){
				    cs = 1;
				}
				for(var a = cs; a < this.page; a++){
                                    this.data.page = a;
				    show_center+= "<a href='javascript:" + this.url + "(" + JSON.stringify(this.data) + ")'>" + a + "</a>";
				}
				show_center+= "<a class='now'>" + this.page + "</a>";
				for(var a = this.page + 1; a <= this.pages; a++){
				    this.data.page = a;
				    show_center+= "<a href='javascript:" + this.url + "(" + JSON.stringify(this.data) + ")'>" + a + "</a>";
				}
			    }else{
				for(var a = this.page - this.showNum; a < this.page; a++){
	                            this.data.page = a;
				    show_center+= "<a href='javascript:" + this.url + "(" + JSON.stringify(this.data) + ")'>" + a + "</a>";
				}
				show_center+= "<a class='now'>" + this.page + "</a>";
				for(var a = this.page + 1; a <= this.page + this.showNum; a++){
	                            this.data.page = a;
				    show_center+= "<a href='javascript:" + this.url + "(" + JSON.stringify(this.data) + ")'>" + a + "</a>";
				}
			    }
			}
		    }else{
			if(this.page > this.pages){
			    show_center+= "<a class='no'>没有第" + this.page + "页</a>";
			}else{
			    if(this.showNum >= this.page){   //是前面的那几页
				for(var a = 1; a < this.page; a++){
				    show_center+= "<a href='" + this.url + "?page=" + a + href + "'>" + a + "</a>";
				}
				show_center+= "<a class='now'>" + this.page + "</a>";
				var cs = this.showNum * 2;
				if(cs > this.pages){
				    cs = this.pages;
				}
				for(var a = this.page + 1; a <= cs; a++){
				    show_center+= "<a href='" + this.url + "?page=" + a + href + "'>" + a + "</a>";
				}
			    }else if(this.pages - this.showNum <= this.page){   //是后面的那几页
			        var cs = this.pages - this.showNum * 2;
			        if(cs < 1){
				    cs = 1;
				}
				for(var a = cs; a < this.page; a++){
				    show_center+= "<a href='" + this.url + "?page=" + a + href + "'>" + a + "</a>";
				}
				show_center+= "<a class='now'>" + this.page + "</a>";
				for(var a = this.page + 1; a <= this.pages; a++){
				    show_center+= "<a href='" + this.url + "?page=" + a + href + "'>" + a + "</a>";
				}
			    }else{
				for(var a = this.page - this.showNum; a < this.page; a++){
			            show_center+= "<a href='" + this.url + "?page=" + a + href + "'>" + a + "</a>";
				}
				show_center+= "<a class='now'>" + this.page + "</a>";
				for(var a = page + 1; a <= this.page + this.showNum; a++){
				    show_center+= "<a href='" + this.url + "?page=" + a + href + "'>" + a + "</a>";
				}
			    }
			}
		    }
	        }
		this.str+= show_center;
		this.str+= show_xia;
		this.str+= show_wei;
		if(this.ts){
		    this.str+= "当前页:" + this.page + " 总页数:" + pages;
		}
		$(this.elem).html(this.str);
		    for(var a in this.style){
			if(a == "a"){
			    var item = $(this.elem + " " + a);
			}else{
			    var item = $(this.elem + " ." + a);
			}
			item.css(this.style[a]);
		    }
		}
	    };