一个简单易懂且实用的JQuery分页插件（jquery.page）（详解）

在你的.html文件中引入相关的文件：

注意:jquery.min.js需在你引入jquery.page.js之前引入。

<link rel="stylesheet" type="text/css" href="src/jquery.page.css"> 
<script src="src/jquery.min.js"></script>
<script src="src/jquery.page.js"></script>

文件引入之后，既可以使用了，在body中写入，相关html的代码：

<div>
   	<span id="page"></span>
   	<span>  显示 <input type="text"  οnkeyup="enterEvent($event)"/> 条/页</span>
</div>

接下来就开始写我们的js代码啦！ JS相关代码：

        var totalPages;//总页数
       
        function enterEvent(e) {
            var keycode = window.event ? e.keyCode : e.which;
            if (keycode == 13) {
                temp(1,false);
            }
        }

        function tempPage(totalPages){
            $("#page").Page({
                totalPages:totalPages,//分页总数
                liNums: totalPages < 7 ? totalPages : 7,//分页的数字按钮数(建议取奇数)
                activeClass: 'activP', //active 类样式定义
                callBack: function (page) {
                    temp(page,true);
                }
            });
        }
        function getVar(result)
        {
            totalPages = result;
            tempPage(totalPages);
            temp(page, true)
        }
        
        function temp(index,judge){
        	$.ajax({
	            type:"POST",
	            //提交的网址
	            url:url,
	            //提交的数据
	            data:{
	            	"pageSize":count,
	                "pageIndex":index
	            },
	            //返回数据的格式
	            datatype: "html",//"xml", "html", "script", "json", "jsonp", "text".
	            //成功返回之后调用的函数             
	            success:function(d){
	           		if (d != null && d.Data != null) {
	                    if (judge == true) {
	                    	console.log(d);
	                    }
	                    else {                    
	                        getVar(d.Data.PageCount);
	                    }
	               }       
	            },
	            //调用出错执行的函数
	            error: function(){
	                //请求出错处理
	            }         
	         });

        }
		

嘿哈，这就完成啦，最后附上一张效果图。