jPage.js插件使用文檔
這一款插件主要是為了bootstrap原生的分頁功能效果不理想而誕生的一款插件。
jPage.js代碼更新地址為：https://github.com/leslieSie/font-end-tools/tree/master/jquery/bootstrapCss/jPage
*. 插件支持的配置
pageNo:這個參數主要是用來指定當前的頁碼的，傳入的類型為number
count:這個參數是標識總的數據條數，傳入的類型為number
pageSize:這個參數是指定每頁要渲染的數據條數，這個與count參數配合可以最終確定頁數，傳入類型為number
color:這個為主題顏色，目前只支持默認的淺藍色主題，所以現在的無需傳參
btnName:這個參數是用來改變確認按鈕的文本的，默認的文本是“確定”
skipPart:配置是否支持分頁插件的拓展部分，默認值為true
showNum:這個參數主要是用來設定默認分頁插件的顯示頁碼數的，默認值為6，傳入的類型為number
*. 插件的依賴
這一款插件是依賴於bootstrap、Jquery來實現的，所以在引入插件的同時必須保證bootstrap和jquery已經引入
*. 一個簡單的使用案例
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
<script type="text/javascript" src="jPage.js"></script>
<script type="text/javascript">
$("#test").page({count:70,pageSize:3,skipPart:true});
</script>
</body>
</html>
這樣就生成了一個總計24頁，每頁有3條數據的分頁組件
*. 插件與ajax的交互
這款插件目前沒有在內部實現ajax的交互方式，但是我們可以通過在外添加事件綁定來實現這個需求
例如：要為確定按鈕添加一個ajax事件我們可以這樣做
$(document).on('click','#test .pagination_search',function(){
if($(document).find("#test .pagination_change_page").val()==""){
alert("跳轉頁碼不能為空");
}else{
var num=parseInt($(document).find("#test .pagination_change_page").val());
$("#test").page({count:12,pageNo:num,pageSize:3,skipPart:true});
}
});
$(document).on("click","#test .pagination li",function(){
var num=$(this).attr("num");
if($(this).attr("class")=="disabled"){
return false;
}
if(num==0 || num==(count+1)){
}else{
$("#test").page({count:12,pageNo:num,pageSize:3,skipPart:true});
}
});
這樣我們就實現了ajax交互的功能
以下為jPage-1.2.js版本的詳細代碼:
| (function($){ | |
| $.fn.page=function(options){ | |
| var defaultOptions={ | |
| pageNo:1, //當前頁碼，用於點亮對應的頁碼 | |
| pageSize:10, //每頁渲染的最大頁碼數 | |
| count:0, // | |
| showNum:6, //初始化的顯示頁碼，默認的是顯示到6頁 | |
| color:'orange', | |
| btnName:'確定', //按鈕名稱 | |
| skipPart:true, //跳轉模塊是否添加 | |
| fontSize:16, | |
| // statisMsgPart:false, //靜態信息顯示，默認為不顯示 | |
| } | |
| var that=this; | |
| var settings=$.extend({},defaultOptions,options); | |
| var pageCount=0; | |
| $(this).empty(); | |
| //主函數 | |
| var main=function(){ | |
| var val=ValidatePageCount(); | |
| if(val==false){ | |
| return false; | |
| } | |
| var pageNo=parseInt(settings.pageNo); | |
| var pageSize=parseInt(settings.pageSize); | |
| var count=parseInt(settings.count); | |
| if(count%pageSize==0){ | |
| pageCount=count/pageSize; | |
| }else{ | |
| pageCount=parseInt(count/pageSize)+1; | |
| } | |
| var showNum=parseInt(settings.showNum); | |
| var pageJson=PageAlgorithm(pageNo,pageSize,pageCount,showNum); | |
| PageDraw(pageJson); | |
| $(that).off(); | |
| }; | |
| main(); | |
| //按鍵觸發 | |
| // $(document).on('click','.pagination li',function(e){ | |
| // //alert(2); | |
| // var num=$(this).attr("num"); | |
| // console.log("NUM:"+num); | |
| // if($(this).attr("class")=="disabled"){ | |
| // return false; | |
| // } | |
| // if(num==0 || num==(settings.count+1)){ | |
| // }else{ | |
| // var json=PageAlgorithm(parseInt(num),settings.pageSize,pageCount,settings.showNum); | |
| // //console.log(json); | |
| // PageDraw(json); | |
| // $(".pagination li").off("click"); | |
| // } | |
| // }); | |
| // $(document).on('click','.pagination_search',function(){ | |
| // //alert(3); | |
| // //輸入為空不做處理 | |
| // if($(that).find(".pagination_change_page").val()==""){ | |
| // alert("跳轉頁碼不能為空"); | |
| // }else{ | |
| // var num=parseInt($(that).find(".pagination_change_page").val()); | |
| // var json=PageAlgorithm(parseInt(num),settings.pageSize,pageCount,settings.showNum); | |
| // PageDraw(json); | |
| // } | |
| // }); | |
| //驗證傳入數據是否符合渲染規則 | |
| function ValidatePageCount(){ | |
| if(settings.pagNo<0 || settings.pageSize<0 || settings.count<0){ | |
| console.error("請檢查 pagNo,pageSize,count這個三個參數是否存在非法輸入"); | |
| return false; | |
| } | |
| //如果showNum為為非法數值，那么設置為默認值 | |
| if(settings.showNum<0){ | |
| setting.showNum=6; | |
| } | |
| } | |
| //分頁渲染 | |
| function PageDraw(json){ | |
| if(parseInt(settings.count)>0){ | |
| var html='<ul class="pagination">'; | |
| for(var i in json.algorithm){ | |
| if(json.algorithm[i].status=="disabled"){ | |
| html+='<li class="'+json.algorithm[i].status+'" num="'+json.algorithm[i].num+'" ><a href="javascript:;">'+json.algorithm[i].text+'</a></li>'; | |
| } | |
| else if(json.algorithm[i].status=="active"){ | |
| html+='<li class="'+json.algorithm[i].status+'" num="'+json.algorithm[i].num+'" ><a href="javascript:;">'+json.algorithm[i].text+'</a></li>'; | |
| }else if(json.algorithm[i].num=="more"){ | |
| html+='<li class="disabled" num="'+json.algorithm[i].num+'" ><a href="javascript:;">'+json.algorithm[i].text+'</a></li>'; | |
| }else{ | |
| html+='<li num="'+json.algorithm[i].num+'" ><a href="javascript:;">'+json.algorithm[i].text+'</a></li>'; | |
| } | |
| } | |
| $(that).html(html); | |
| if(settings.skipPart==true){ | |
| $(that).find(".pagination").append('<span class="text-muted" style="margin:5px;margin-left:10px;display:inline-block;font-size:18px;font-size:'+settings.fontSize+'px">共有'+pageCount+'頁/'+settings.count+'個</span><div style="display:inline-block" name="changePage"><span class="text-muted" style="margin:5px;margin-left:0px;display:inline-block;font-size:'+settings.fontSize+'px">,到第</span> <input type="number" min="1" max="'+pageCount+'"class="pagination_change_page" style="width:45px;border-color:#ddd"> <span class="text-muted" style="margin:5px;margin-left:10px;display:inline-block;font-size:font-size:'+settings.fontSize+'px">頁</span> <button class="btn btn-default btn-sm pagination_search">'+settings.btnName+'</button></div>'); | |
| } | |
| }else{ | |
| } | |
| } | |
| //分頁算法邏輯，主要對分頁進行邏輯運算，不做渲染，返回值為JSON | |
| function PageAlgorithm(pageNo,pageSize,count,showNum){ | |
| var data=""; | |
| if(pageNo==1){ | |
| data='{"algorithm":[{"text":"上一頁","num":0,"status":"disabled"}'; | |
| }else{ | |
| data='{"algorithm":[{"text":"上一頁","num":"'+(pageNo-1)+'","status":"abled"}'; | |
| } | |
| //判斷分頁類型 | |
| if(count>showNum){ | |
| if(pageNo<=showNum+2){ | |
| //判斷pageNo是否在要初始化顯示的頁碼內 | |
| if(pageNo<=showNum){ | |
| for(var i=1;i<=showNum;i++){ | |
| if(pageNo==i){ | |
| data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}'; | |
| }else{ | |
| data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}'; | |
| } | |
| } | |
| if(pageNo==showNum){ | |
| data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}'; | |
| } | |
| }else{ | |
| for(var i=1;i<=pageNo;i++){ | |
| if(i==pageNo){ | |
| data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}'; | |
| }else{ | |
| data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}'; | |
| } | |
| } | |
| if(pageNo!=count){ | |
| data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}'; | |
| } | |
| } | |
| //選中最后一頁時，將省略號隱藏 | |
| if(pageNo!=count){ | |
| if(pageNo!=(count-1)){ | |
| data+=',{"text":"…","num":"more","status":""}'; | |
| } | |
| } | |
| }else if(pageNo>count-showNum){ | |
| data+=',{"text":"1","num":"1","status":"abled"}'; | |
| data+=',{"text":"2","num":"2","status":"abled"}'; | |
| data+=',{"text":"…","num":"more","status":"disabled"}'; | |
| for(var i=count-showNum+1;i<=count;i++){ | |
| if(pageNo==i){ | |
| data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}'; | |
| }else{ | |
| data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}'; | |
| } | |
| } | |
| } | |
| else{ | |
| data+=',{"text":"1","num":"1","status":"abled"}'; | |
| data+=',{"text":"2","num":"2","status":"abled"}'; | |
| data+=',{"text":"…","num":"more","status":"disabled"}'; | |
| for(var i=pageNo-2;i<=pageNo+2;i++){ | |
| if(i==pageNo){ | |
| data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}'; | |
| }else{ | |
| data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}'; | |
| } | |
| } | |
| data+=',{"text":"…","num":"more","status":"disabled"}'; | |
| } | |
| }else{ | |
| for(var i=1;i<=count;i++){ | |
| if(pageNo==i){ | |
| data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}'; | |
| }else{ | |
| data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}'; | |
| } | |
| } | |
| } | |
| if(pageNo==count){ | |
| data+=',{"text":"下一頁","num":"'+(pageNo+1)+'","status":"disabled"}]}'; | |
| }else{ | |
| data+=',{"text":"下一頁","num":"'+(pageNo+1)+'","status":"abled"}]}'; | |
| } | |
| var json_return = JSON.parse(data); | |
| return json_return; | |
| } | |
| } | |
| })(jQuery); |