JS模仿百度分頁條，實現前5後4的效果

1、前五後四介紹

先來看一下百度分頁條：

• 當前頁碼爲6時如下圖：
  
• 那麼假如當前頁碼爲10呢？如下圖：
  
  你會發現，一樣的，前面還是5，後面還是4，稱這種效果爲前5後4。當然，在特殊情況下，是不會有前5後4的效果的，例如：
  ①瀏覽第1，2，3，4，5頁時；
  
  ② 瀏覽倒數第1，2，3，4頁時。（這裏不上圖了，想象一下就OK）
  寫代碼時，需要考慮到這兩種情況。

2、代碼

變量說明：

• totalPage：後臺返回來的數據，總頁數
• currentPage：後臺返回來的數據，當前頁碼
• beginNum：分頁條的第一個數（如下圖）
• endNum：分頁條的最後一個數（如下圖）
  

1. 給beginNum和endNum賦值的代碼如下

				var beginNum;//分頁條第一個數字
                var endNum;//分頁條最後一個數字
                if(totalPage<10)//如果總頁數小於10頁
                {
                    beginNum=1;
                    endNum=totalPage;
                }
                else//如果總頁數大於等於10頁
                {
                    beginNum=currentPage-5;
                    endNum=currentPage+4;
                    if(beginNum<1)//currentPage-5可能會是一個小於等於0的數，也就是用戶在瀏覽1,2,3,4,5頁時的情況
                    {
                        beginNum=1;//糾正回來
                        endNum=beginNum+9;
                    }
                    if(endNum>totalPage)//用戶在瀏覽倒數1,2,3,4頁時的情況
                    {
                        endNum=totalPage;//糾正回來，讓分頁條最後一個數字爲總的頁數
                        beginNum=endNum-9;
                    }

                }

2. 拿到了beginNum和endNum之後，就要用for循環遍歷，生成分頁條中間的內容。

for(var i=beginNum;i<=endNum;i++)
{
      if(i==currentPage)
      {
          var item=' <li class="active" οnclick="findByPage('+i+',5);"><a href="#">'+i+'</a></li>';
      }
     else
     {
         var item=' <li οnclick="findByPage('+i+',5);"><a href="#">'+i+'</a></li>';
     }
     str=str+item;
 }

代碼解釋：
上面的代碼就是生成分頁條中間的內容，如下圖（我自己做的分頁條）：

if else語句就是判斷數字是不是當前頁碼，如果是的話，就改變樣式。就比如上圖中的7，是當前頁碼，樣式顏色就變成深藍色了。
str=str+item;就是拼接字符串，str代表了整個分頁欄的字符串，有了str，後面就可以用
$("#fenyelan").html(str);//初始化分頁欄
來生成整個分頁欄了。