<!DOCTYPE html>
<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8" />
<title>一个非常简单的jQuery分页插件</title>
<style>
*{ margin:0; padding:0; list-style:none;}
a{ text-decoration:none;}
a:hover{ text-decoration:none;}
.tcdPageCode{padding: 15px 20px;text-align: left;color: #ccc;}
.tcdPageCode a{display: inline-block;color: #428bca;display: inline-block;height: 25px; line-height: 25px; padding: 0 10px;border: 1px solid #ddd; margin: 0 2px;border-radius: 4px;vertical-align: middle;}
.tcdPageCode a:hover{text-decoration: none;border: 1px solid #428bca;}
.tcdPageCode span.current{display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;color: #fff;background-color: #428bca; border: 1px solid #428bca;border-radius: 4px;vertical-align: middle;}
.tcdPageCode span.disabled{ display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px; color: #bfbfbf;background: #f2f2f2;border: 1px solid #bfbfbf;border-radius: 4px;vertical-align: middle;}
</style>
</head>
<body>
<!-- 代码部分begin -->
<div class="tcdPageCode">
</div>
<pre>
调用方法：
$(".tcdPageCode").createPage({
pageCount:10,
current:1,
backFn:function(p){
alert(p);
//单击回调方法，p是当前页码
}
});
pageCount：总页数
current：当前页
</pre>
</body>
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.page.js"></script>
<script>
$(".tcdPageCode").createPage({
pageCount:12,
current:1,
backFn:function(p){
alert(p);
console.log(p);
}
});
</script>
<!-- 代码部分end -->
</html>
---------------------------------jquery.pager.js
//鍒嗛〉鎻掍欢
/**
2014-08-05 ch
**/
(function($){
var ms = {
init:function(obj,args){
return (function(){
ms.fillHtml(obj,args);
ms.bindEvent(obj,args);
})();
},
//濉厖html
fillHtml:function(obj,args){
return (function(){
obj.empty();
//涓婁竴椤�
if(args.current > 1){
obj.append('<a href="javascript:;" class="prevPage">上一页</a>');
}else{
obj.remove('.prevPage');
obj.append('<span class="disabled">首页</span>');
}
//涓棿椤电爜
if(args.current != 1 && args.current >= 4 && args.pageCount != 4){
obj.append('<a href="javascript:;" class="tcdNumber">'+1+'</a>');
}
if(args.current-2 > 2 && args.current <= args.pageCount && args.pageCount > 5){
obj.append('<span>...</span>');
}
var start = args.current -2,end = args.current+2;
if((start > 1 && args.current < 4)||args.current == 1){
end++;
}
if(args.current > args.pageCount-4 && args.current >= args.pageCount){
start--;
}
for (;start <= end; start++) {
if(start <= args.pageCount && start >= 1){
if(start != args.current){
obj.append('<a href="javascript:;" class="tcdNumber">'+ start +'</a>');
}else{
obj.append('<span class="current">'+ start +'</span>');
}
}
}
if(args.current + 2 < args.pageCount - 1 && args.current >= 1 && args.pageCount > 5){
obj.append('<span>...</span>');
}
if(args.current != args.pageCount && args.current < args.pageCount -2 && args.pageCount != 4){
obj.append('<a href="javascript:;" class="tcdNumber">'+args.pageCount+'</a>');
}
//涓嬩竴椤�
if(args.current < args.pageCount){
obj.append('<a href="javascript:;" class="nextPage">下一页</a>');
}else{
obj.remove('.nextPage');
obj.append('<span class="disabled">尾页</span>');
}
})();
},
//缁戝畾浜嬩欢
bindEvent:function(obj,args){
return (function(){
obj.on("click","a.tcdNumber",function(){
var current = parseInt($(this).text());
ms.fillHtml(obj,{"current":current,"pageCount":args.pageCount});
if(typeof(args.backFn)=="function"){
args.backFn(current);
}
});
//涓婁竴椤�
obj.on("click","a.prevPage",function(){
var current = parseInt(obj.children("span.current").text());
ms.fillHtml(obj,{"current":current-1,"pageCount":args.pageCount});
if(typeof(args.backFn)=="function"){
args.backFn(current-1);
}
});
//涓嬩竴椤�
obj.on("click","a.nextPage",function(){
var current = parseInt(obj.children("span.current").text());
ms.fillHtml(obj,{"current":current+1,"pageCount":args.pageCount});
if(typeof(args.backFn)=="function"){
args.backFn(current+1);
}
});
})();
}
};
$.fn.createPage = function(options){
var args = $.extend({
pageCount : 10,
current : 1,
backFn : function(){}
},options);
ms.init(this,args);
};
})(jQuery);
//浠ｇ爜鏁寸悊锛氭噿浜轰箣瀹� www.lanrenzhijia.com
---------------应用案例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>管理后台.................</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script type="text/javascript" src="../../jquery-easy-ui/jquery.min.js"></script>
<script type="text/javascript" src="../../js/util.js"></script>
<script type="text/javascript" src="../../js/jquery.pager.js"></script>
<link rel="stylesheet" type="text/css" href="../../style/page.css"/>
<link rel="stylesheet" type="text/css" href="../../style/style.css"/>
<script type="text/javascript" src="../../js/common.js"></script>
</head>
<body>
<div class="mainer" id="mainner1">
<div id="search" class="search">
<input class="key radius5px" type="text" id="goodsNo" placeholder="输入商品编号查询"/>
<input class="btn radius5px rest" type="button" onclick="rest()" value="重置"/>
<input class="btn radius5px so" type="button" onclick="searchInfo()" value="查询"/>
</div>
<div id="middleDiv" class="middleDiv" >
<table id="tableInfo" width="100%" border="0" cellpadding="0" cellspacing="0" class="lists">
<tr></tr>
</table>
</div>
<div id="total-box" class="total-box">
<input type="hidden" id="totals"/>
<div class="total">共<span id="counts"></span>条记录，当前显示第<span id="pages">1</span>页</div>
<div class="tcdPageCode" id="tcdPageCode" >
</div>
</div>
</div>
<script type="text/javascript" src="../../js/goods/fxGoods.js"></script>
</body>
</html>
------------------fxGoods.js
$("#middleDiv").height(window.innerHeight-$("#search").height()-$("#total-box").height()-200);
window.onload = function(){
loadTable(1);
};
function searchInfo(){
loadTable();
}
//pageCount 总页数 ， current 第几页
function loadPage(pageCount,current){
var ps = Math.ceil(parseInt(pageCount)/20);
$("#tcdPageCode").createPage({
pageCount: ps,
current:current,
backFn:function(p){
$("#pages").html(p);
loadTable();
}
});
}
function rest(){
$("#goodsNo").val("");
}
//current 第几页
function loadTable(current){
var goodsNo = $("#goodsNo").val();
var page = $("#pages").html();
$.ajax({
type:"POST", //请求方式
url:"../../service/FxGoods/getFxGoodsQueryPage", //请求路径
data : {"page":page,"goodsNo":goodsNo},
cache: false, //(默认: true,dataType为script和jsonp时默认为false) jQuery 1.2 新功能，设置为 false 将不缓存此页面。
dataType: "json", //返回值类型 使用json的话也可以，但是需要在JS中编写迭代的html代码，如果格式样式
success:function(data){
var total = data.total;
var html = "<tr style='height: 20px;'>"+
"<th>序号</th><th>商品编号</th><th>产品名称</th>"+
"<th>抢单结束时间</th><th>订单状态</th>"+
"<th>抢单状态</th>"+
"<th>标题</th><th>货物描述</th>"+
"<th>产品抢单份数</th><th>每份销售价格</th>"+
"<th>审核人</th><th>审核时间</th>"+
"<th>创建时间</th>"+
"</tr>";
var contect = "";
var number = ($("#pages").html()-1)*20;
if(parseInt(total) > 0){
$("#counts").html(total);
var grabState = "";
var goodState = "";
var list = data.rows;
for(var i=0;i<list.length;i++){
var num = parseInt(number)+i+1;
contect += "<tr><td>"+num+"</td>"
+"<td>"+list[i].goodsNo+"</td>"
+"<td>"+list[i].prodName+"</td>"
+"<td>"+list[i].grabTm+"</td>";
if(list[i].goodState=="ADUIT"){
goodState = "<td><span style='color:blur'>审核</span></td>";
}else if(list[i].goodState=="SALING"){
goodState = "<td><span style='color:green'>销售中</span></td>";
}else if(list[i].goodState=="CLOSED"){
goodState = "<td><span style='color:red'>结束</span></td>";
}else{
goodState = "<td><span >已经销售完</span></td>";
}
if(list[i].grabState=="OPEN"){
grabState = "<td><span style='color:green'>打开</span></td>";
}else{
grabState = "<td><span style='color:red'>关闭</span></td>";
}
var title = list[i].title==null?'':list[i].title;
var orderDesc = list[i].orderDesc==null?'':list[i].orderDesc;
var roleNum = list[i].roleNum==null?'':list[i].roleNum;
var unitPrice = list[i].unitPrice==null?'':list[i].unitPrice;
var auditUser = list[i].auditUser==null?'':list[i].auditUser;
var auditTm = list[i].auditTm==null?'':list[i].auditTm;
var pushTm = list[i].pushTm==null?'':list[i].pushTm;
contect += goodState + grabState
+"<td>"+title+"</td>"
+"<td>"+orderDesc+"</td>"
+"<td>"+roleNum+"</td>"
+"<td>"+unitPrice+"</td>"
+"<td>"+auditUser+"</td>"
+"<td>"+auditTm+"</td>"
+"<td>"+pushTm+"</td></tr>";
}
}
$("#tableInfo").html(html+contect);
//第一次加载时需要初始化分页
if(current!=""&¤t!=null){
loadPage(total,current);
}
},
error:function(){
alert("系统繁忙，稍后再试！");
}
});
}