分頁效果 （後端分頁，前端改變參數‘頁碼’請求數據）
html：
<div style="float: left;margin-right: 30px;" class="tcdPageCode"></div>JS：
$(".tcdPageCode").createPage({
pageCount://總頁數,
current:1,
backFn:function(p){
//p爲返回的當前頁碼
}
}); css：
* {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
.tcdPageCode {
padding: 15px 5px;
text-align: left;
color: #ccc;
text-align: center;
}
.tcdPageCode a {
display: inline-block;
color: #6699cc;
display: inline-block;
height: 25px;
line-height: 25px;
padding: 0 5px;
border: 1px solid #ddd;
margin: 0 2px;
border-radius: 4px;
vertical-align: middle;
}
.tcdPageCode a:hover {
text-decoration: none;
border: 1px solid #6699cc;
}
.tcdPageCode span.current {
font-size: 12px;
display: inline-block;
height: 25px;
line-height: 25px;
padding: 0 5px;
margin: 0 2px;
color: #fff;
background-color: #6699cc;
border: 1px solid #6699cc;
border-radius: 4px;
vertical-align: middle;
}
.tcdPageCode span.disabled {
font-size: 12px;
display: inline-block;
height: 25px;
line-height: 25px;
padding: 0 5px;
margin: 0 2px;
color: #bfbfbf;
background: #f2f2f2;
border: 1px solid #bfbfbf;
border-radius: 4px;
vertical-align: middle;
}
.tapnum{
color: #222;
display: inline-block;
height: 25px;
line-height: 25px;
padding: 0 5px;
border: 1px solid #ddd;
text-align: center;
border-radius: 4px;
vertical-align: middle;
width:40px;
margin: 0 5px 0 16px;
}
.tipsbtn{
color: #6699cc;
height: 25px;
line-height: 25px;
padding: 0 5px;
border: 1px solid #ddd;
margin: 0 2px;
background: #fff;
border-radius: 4px;
margin-left: 5px;
cursor: pointer
}第三方插件 JQ JQ.page (考慮到頁面有篩選數據。且分頁需要動態生成的情況。點擊上下頁是要先解除（off）點擊事件再進行綁定on事件) ，增加跳轉按鈕，可以跳到任意頁面
(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:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="tcdNumber">'+args.pageCount+'</a>');
}
//下一頁
if(args.current < args.pageCount){
obj.append('<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nextPage">下一頁</a>');
}else{
obj.remove('.nextPage');
obj.append('<span class="disabled">下一頁</span>');
}
obj.append('<input class="tapnum" value='+args.current+'><a href="javascript:;" class="tapTo">跳轉</a>');
})();
},
//綁定事件
bindEvent:function(obj,args){
return (function(){
//下一頁
obj.off("click").on("click","a.nextPage",function(){
var current = parseInt($(".current").text())+1;
console.log(current,$('.tapnum').val())
console.log('輸入框',$('.tapnum').val())
ms.fillHtml(obj,{"current":current,"pageCount":args.pageCount});
if(typeof(args.backFn)=="function"){
args.backFn(current);
}
});
// 中間數字
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.tapTo",function(){
var current = parseInt($('.tapnum').val());
if(current>args.pageCount){
alert('超過最大頁數')
}else if(current<1){
alert('頁數不能小於1')
}else{
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($(".current").text())-1;
ms.fillHtml(obj,{"current":current,"pageCount":args.pageCount});
if(typeof(args.backFn)=="function"){
args.backFn(current);
}
});
})();
}
}
$.fn.createPage = function(options){
var args = $.extend({
pageCount : 10,
current : 1,
backFn : function(){}
},options);
ms.init(this,args);
}
})(jQuery);