整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
輯導語：我們在網頁上瀏覽內容時，劃到最下面時經常需要進行翻下一頁查看新的內容，也可以選擇跳轉到其他頁數；讓我們在瀏覽信息是更加清晰，以免當前頁太多信息造成混亂；本文作者詳細介紹了分頁功能的分析與設計，我們一起來看一下。
在網頁上瀏覽內容時，通常在該頁面的底部，會有個分頁的功能，通過翻頁等操作，跳轉到其他頁面查看新的內容。
當有大量信息需要展示給用戶時，為了減少用戶單次請求對服務器產生的性能壓力和時間損耗，每次只加載固定數量的少量信息。
用戶瀏覽完之后，通過操作分頁功能，再向服務器發起請求，以獲取更多內容。
具體來說分頁功能解決了以下兩個問題。
不同場景下分頁的構成元素不同，構成元素的不同使得分頁功能的作用也有一些差別。
下圖是一個常見的分頁設計樣式，子功能主要有頁碼展示、數據量展示以及翻頁操作。我們來分析這個基本分頁設計有哪些作用。
如圖所示，頁碼展示包括當前頁碼展示、當前頁碼相鄰幾個頁碼的展示以及首末頁頁碼展示。
頁碼展示幫助用戶定位內容：例如用戶在某個商品的搜索結果頁瀏覽時，看到第5頁，這時還是覺得第2頁的一件商品更想買，于是就可以通過點擊頁碼2回到展示該商品的頁面；這就達到了通過頁碼快速定位商品位置的目的，而不用逐個商品逐個商品地往回去查找該商品在哪里。
信息量展示包括頁面總數、每頁數據數量以及數據總量。
信息量的展示用數字體現了數據的多少，讓用戶對要處理的瀏覽任務有心理預期和把控。
商品列表頁、內容列表頁，通常會在數量較大的時候展示頁面總數和數據總量。
客觀的數字展示出來，一方面是會讓用戶認為該平臺的商品或內容非常多，是個可以找到滿足需求的商品或內容的平臺，對平臺產生好感；另一方面是對瀏覽的內容有預期，例如某個商品的搜索結果共有500頁，由于數量太多不能看全部看完，于是決定按銷量排序，從前20頁中挑選一個最滿意的。
管理后臺的列表頁，也會展示信息量；管理后臺是企業人員處理工作的地方，這里展示信息量，方便工作人員對平臺中的信息量，以及任務量有清晰和客觀的認識。
某個圖書管理后臺，到貨但未上架書籍的列表頁顯示了信息量，這時管理員就能明白：目前到貨的數量（信息量），以及要上架書籍的數量（任務量）。
翻頁操作包括上一頁下一頁這樣的逐頁翻頁，以及不相鄰頁碼的跳轉。
逐頁翻頁操作方便用戶按順序閱讀；用戶瀏覽信息時會像讀書一樣逐頁地瀏覽下去，“上一頁”、“下一頁”用的次數較多；如果沒有逐頁翻頁的操作，用戶只能點擊不同位置的頁碼去訪問不同的頁面，十分不方便。
不相鄰頁碼的跳轉功能提高了跳轉的效率；當需要跳轉到距離當前頁很遠的一個頁面時，就會用到這個功能；例如某件商品的搜索結果頁面按價格從低到高排序時，翻了前5頁，還是覺得這個價位的太低，于是可能會使用該功能直接跳轉到第20頁開始瀏覽。
不同場景下分頁的構成元素不同，分頁功能設計的第一步，需要根據場景確定該功能由哪些元素構成。
可選的元素有哪些，各自有什么用呢？
數據總量：數據總量說明了用戶需要瀏覽的內容的總量；常見的場景，比如在管理后臺篩選符合條件的數據記錄時，搜索結果頁通常會展示這個信息，這讓運營人員在操作時有心理預期。
頁面展示數量：這個元素能控制每個頁面展示多少數據；當搜索結果很多，成百上千，只需粗略瀏覽時，這個功能可以擴展每個頁面展示的信息數量，避免頻繁翻頁導致的效率低下；同樣的，當搜索結果不多，需要精細瀏覽時，又可以將每頁的數量調少。
上一頁和下一頁翻頁：這是分頁功能中最基本的構成元素，通過點擊上一頁回到前一個瀏覽的頁面，通過點擊下一頁進入后一個要瀏覽的頁面；就像讀書時會有按頁面逐頁閱讀的情況，網頁也會經常出現這樣逐頁瀏覽的情況；當內容非常少的時候，就可以只要這個基本的構成元素，例如輪播圖中的上下翻頁其實就是一樣的元素。
當前頁碼：當前頁碼說明了當前所處的位置。
相鄰頁碼展示：頁碼數字展示通常展示當前頁碼的前后幾頁，比如當前在第10頁，頁碼數字展示前后各5頁，那頁碼數字就為5、6、7、8、9、10、11、12、13、14、15；連續頁碼的展示方便用戶快速跳轉到附近的頁面。
更多分頁：當數據量很大時就需要很多的分頁來承載內容；但頁面大小是有限的，不能將全部的頁碼數字都展示出來，于是就省略了離當前頁面很遠的頁碼數，再通過點擊圖標就能訪問這些被省略頁碼的頁面。
總頁數：總頁數說明了內容一共有多少頁，就像一本紙質書有總頁數，一本有聲書有總時長；通過這個元素，用戶才能了解內容的多少，對整理內容有個把握。
頁碼跳轉：頁碼跳轉幫助用戶從當前頁面跳轉到其他某個頁面；比如用戶在搜索了某件商品，按銷量排序，這時瀏覽到了第15頁，滿意度越來越低；于是打算從前5頁選一個，這時就能通過頁碼跳轉快速跳轉到第1-5頁了。
在設計分頁功能時，通常選擇后端分頁且局部刷新的方法來加載數據。這種方法減少了服務器壓力。
不同于前端分頁中將數據一次性全部取出來，后端分頁是每次請求只查詢一頁的值，這樣做避免了服務端將龐大的數據量一次傳遞給前端，造成下載量大和服務器壓力大等問題。
局部刷新就是，當點擊下一頁之后，前端發起請求去后端拿數據填充到頁面的過程中，頁面沒有進行全局刷新（全局刷新可以理解為頁面進行了一次跳轉，重新跳轉到自己），只是頁面特定區域通過前端更新。
看下圖這個管理后臺的例子，這是經過篩選后，語言為英語，分類為浪漫的圖書列表，當點擊下一頁后：
如果是全局刷新，服務端需要返回整個頁面，包括篩選區域和結果列表內容，用戶會看到該頁面刷新了一次，也就是頁面進行了一次跳轉，重新跳到自己。
如果是局部刷新，服務端只用返回結果列表，此時頁面除了結果列表區域會加載出新的數據，其他部分都不會刷新，減輕了服務器的壓力。
PC端商品、資訊內容的列表頁面，通常會有個分頁的功能，通過翻頁等操作，用戶可以跳轉到其他頁面查看新的內容。
分頁功能減少了單次請求對服務器產生的性能壓力、用戶等待時間以及低價值請求。
分頁的子功能主要有頁碼展示、數據量展示以及翻頁操作，分別都有各自的作用，例如內容定位、對內容的預期把控等；我們在設計分頁功能時，可以根據業務需要來選擇不同的構成元素。
本文由 @相與 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
站分頁功能是必不可少的，一般用在列表頁面中，javascript實現分頁效果，效果如下：
實現代碼
html結構：
CSS樣式：
javascript：
上一章節中，我們為wordpress網站的首頁添加了全站文章列表。一個wordpress網站不可能只有幾篇文章，可能會有成千上萬的文章，作為一個wordpress博客主題模板，一般情況下，不可能讓所有的文章在一個頁面一下子全部顯示出來，如果真這樣，網頁的負載會非常大。正確的處理方式，是先顯示最前面的十幾篇或二十幾篇文章，然后，“點擊一個分頁按鈕”或者“鼠標向下滾動觸發一個事件”后，再顯示后面的十幾篇或二十幾篇文章，以此類推。本節，我們來介紹“如何給wordpress網站的文章列表添加分頁效果”，一起來看看吧。
在wordpress網站模板的functions.php文件中添加如下代碼：
//分頁函數function pages($query_string){
global $posts_per_page, $paged; //全局變量
$my_query=new WP_Query($query_string ."&posts_per_page=-1"); //創建查詢對象
$total_posts=$my_query->post_count; //通過查詢對象獲取文章總數
if(empty($paged)) $paged=1; //當前頁碼數，如是$paged為空，就讓
$paged=1$prev=$paged - 1; //上一頁變量
$next=$paged + 1; //下一頁變量
$range=4; //
$showitems=($range * 2)+1; //顯示多少個分頁頁碼按鈕
$pages=ceil($total_posts/$posts_per_page); //獲取總頁數
if(1 !=$pages){
echo "<div class='pagination'>";
echo ($paged > 2 && $paged+$range+1 > $pages && $showitems < $pages)? "<a href='".get_pagenum_link(1)."'>最前</a>":"";
echo ($paged > 1 && $showitems < $pages)? "<a href='".get_pagenum_link($prev)."'>上一頁</a>":"";
for ($i=1; $i <=$pages; $i++){
if (1 !=$pages &&( !($i >=$paged+$range+1 || $i <=$paged-$range-1) || $pages <=$showitems )){
echo ($paged==$i)? "<span class='current'>".$i."</span>":"<a href='".get_pagenum_link($i)."' class='inactive' >".$i."</a>";
}
}
echo ($paged < $pages && $showitems < $pages) ? "<a href='".get_pagenum_link($next)."'>下一頁</a>" :"";
echo ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) ? "<a href='".get_pagenum_link($pages)."'>最后</a>":"";echo "</div>\n";
}
}
然后，在wordpress網站前臺模板的文章列表的代碼下方調用這個分頁函數，代碼如下：
<?php pages($query_string); //列表分頁 ?>
然后，我們就可以在wordpress網站的文章列表下方看到分頁按鈕。如果想要樣式好看一點，可以對分頁按鈕添加CSS樣式，來進行美化一下。
為了更方便wordpress網站模板開發者開發模板主題，wordpress從4.0版本開始，就提供了一個分頁函數the_posts_pagination()，通過這個函數，我們同樣可能實現wordpress網站的文章列表的分頁效果。代碼如下：
the_posts_pagination( array('mid_size'=> 3, //當前頁碼數的 兩邊 顯示幾個頁碼。'prev_text'=>'<', //上一頁'next_text'=>'>', //下一南) );
這個函數跟wordpress其wp_list_pages()等函數類似，有一個參數，這個參數可是一個數組類型（如上面的代碼，參數就是數組類型），也可以是一個字符串類型，上面的的代碼的參數修改成字符串類型后，如下：
the_posts_pagination("mid_size=3&prev_text=<&next_text=>");
是使用字符串類型，還是使用數組類型，主要根據開發者的個人愛好，我個人還是比較喜歡用數組類型，看起來比較清楚。
在wordpress網站模板開發中，使用上面任何一種方式來添加文章列表的分頁效果都可以，不過，我個人還是建議使用wordpress自帶的函數the_posts_pagination()，對開發更省事，效率更高，而且是wordpress自己的函數，后期都不需要維護。如果想讓分頁按鈕布局更加個性化，可以考第一種方式。
如果還有什么不太明白的，或者你想了解什么，可以在下面評論中給我留言。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
