前臺通用控制頁碼顯示的JS代碼

一般都要求自定義的頁碼樣式，直接用網上分頁插件就比較麻煩了，這裡寫了一個比較簡單通用的控制頁碼顯示的js代碼。

首先是使用時需要自己根據自己具體頁面內容修改的代碼：

 1 //這裡是需要修改的，換成自己頁面的樣式和id就行，還有查詢方法也需要自己進行具體修改
 2 var _page_pre = '<a href="javascript:searchData(PagePre);" class="go-page">&lt;上一頁</a>';//"上一頁"的html
 3 var _page_check = '<a href="javascript:void(0);" class="n check" >PageNow</a>';//"選中頁碼"的html
 4 var _page_middle = '<a href="javascript:searchData(pageNum);" class="n" >pageNum</a>';//"普通頁碼"的html
 5 var _page_next = '<a href="javascript:searchData(PageNext);" class="go-page"">下一頁&gt;</a>';//"下一頁"的html
 6 var _page_id = "pagelist";//顯示頁碼的容器的id
 7 var sideNum = 4;//選中頁兩側普通頁的數量，可以自己定義
 8 
 9 /**
10  * ajax查詢數據
11  */
12 function searchData(pageNow){
13     $.ajax({
14         type: "POST",
15         url: "",
16         data: "pageNum="+pageNow,//pageNow是必須的，其他參數根據自己需要可以再加，
17         dataType:"json",
18         success: function(json){
19 if(json.status == "ok"){
20 //省略了datalist_html的拼接
21 $("#datalist").html(datalist_html);//查詢到當前頁的具體數據，拼接好添加到頁面裡面
22 var total = json.pageTotal;//查詢到的總頁數
23 showPage(total,pageNow);//這裡調用控制頁碼顯示的方法
24  }
25         }
26      });
27 }

接下來才是通用的js代碼，不需要做任何修改。

這裡只實現了單純頁碼的顯示功能，“顯示總頁數”，“跳頁”，“首頁”，“最後一頁”功能比較簡單，自己根據下面的代碼可以很容易加上的。

 1 /**
 2  * 控制頁碼顯示
 3  * @param pageCount 總頁數
 4  * @param pageNum 當前頁
 5  * @return
 6  */
 7 function showPage(pageCount,pageNum){
 8     var startNum = 0;
 9     var endNum = 0;
10     //獲取顯示頁碼的起始值
11     if(pageNum<=sideNum){
12         startNum = 1;
13     }else{ 
14         if((pageNum+sideNum)>=pageCount){
15 if((2*sideNum+1)>=pageCount){
16 if((pageCount - 2*sideNum)>=1){
17 startNum = pageCount - 2*sideNum;
18 }else{
19 startNum = 1;
20  }
21 }else{
22 startNum = pageCount - 2*sideNum;
23  } 
24         }else{
25 if((pageNum-sideNum)>=1){
26 startNum = pageNum - sideNum;
27 }else{
28 startNum = 1;
29  } 
30         }
31     }
32     //獲取顯示頁碼的結束值
33     if(pageCount<=sideNum){
34         endNum = pageCount;
35     }else{
36         if((sideNum+pageNum)>=pageCount){
37 endNum = pageCount;
38         }else{
39 endNum = sideNum+pageNum;
40 if((sideNum+pageNum)<=(2*sideNum+1)){ 
41 if((2*sideNum+1)>=pageCount){
42 endNum = pageCount;
43 }else{
44 endNum = 2*sideNum+1;
45  }
46 }else{
47 endNum = sideNum + pageNum;
48  }
49         }
50     }
51     //生成頁碼html
52     var pageHtml = '';
53     if(pageNum > 1){//對“上一頁”按鈕的控制，這裡可以根據自己需要選擇隱藏還是置灰
54         pageHtml += _page_pre.replace(/PagePre/g, pageNum-1);
55     }
56     for (var i=startNum; i<=endNum; i++) {//控制中間頁碼
57         if(i==pageNum){
58 pageHtml += _page_check.replace(/PageNow/g, i);
59         }else{
60 pageHtml += _page_middle.replace(/pageNum/g, i);
61         }
62     }
63     if(pageNum<pageCount){//對“下一頁”按鈕的控制，這裡可以根據自己需要選擇隱藏還是置灰
64         pageHtml += _page_next.replace(/PageNext/g, pageNum+1);
65     }
66     //將拼好的頁碼html添加到頁面上
67     $("#"+_page_id).html(pageHtml);
68 }