今天所提到的就是一個關於分頁邏輯的思考過程，是眾多分頁方式的一種，這里簡單整理一下我的思考過程。
首先，確定一種分頁的模式，現在線上使用的風格種類也比較多。這里我確定的具備下面的特點：
1.具有上一頁、下一頁、首頁、尾頁
2.具備設置defaultPage頁后顯示省略號
3.具備當前頁前后步數設置step
其次，整理思路，如何實現這個功能，然后進行拆解。
1.具有上一頁、下一頁、首頁、尾頁，這個邏輯很簡單
首頁、上一頁：如果總頁數大於一頁，並且當前頁數不是第一頁，就可以展示上一頁（或者說，可以讓上一頁可點擊）
尾頁、下一頁：思路和上一頁差不多，如果總頁數大於一頁，並且當前頁數下於總頁數，就可以展示下一頁（或者說讓下一頁可點擊）
//首頁、上一頁邏輯
if(page_id == 1) {
//不可操作的首頁和上一頁
}else if(page_id > 1 && last_page > 1) {
//可操作的首頁和上一頁
}
//尾頁、下一頁邏輯
if(page_id == last_page) {
//不可操作的首頁和下一頁
}else if(last_page > 1 && page_id < last_page) {
//可操作的尾頁和下一頁
}
2.具備設置defaultPage頁后顯示省略號，這個邏輯需要考慮一些特殊情況，比如說：總頁數只有一頁，當然不能進入省略號的邏輯了
//threshold = step + 2; 臨界值 //pagesDefault最小是臨界值的二倍減去1 pagesDefault = parseInt(pagesDefault) > 2*threshold-1 ? 2*threshold-1 : 5;
3.設置step，這個是分頁最重要的邏輯，這塊兒單獨詳細解釋一下：
首先判斷總頁數是否下於或等於defaultPage，下於的話就直接循環輸出即可
for(var i=1; i<=last_page; i++) {
if(i == page_id) {
tpl += '<li class="curent">'+i+'</li>';
}else {
tpl += '<li>'+i+'</li>';
}
}
其次就是總頁數大於defaultPage，這又是這個邏輯中，最復雜的一塊兒。
要想直接想清楚這塊兒的處理邏輯其實挺繞的，我們運用簡單的數學歸納法，進行一個歸納（以step=1為例）
一共有n頁，他有一下幾種邏輯：
page_id=1 1 2 ... n
page_id=2 1 2 3 ... n
page_id=3 1 2 3 4 ... n
page_id=4 1 ... 3 4 5 ... n
page_id=5 1 ... 4 5 6 ... n
...
page_id=n-3 1 ... n-4 n-3 n-2 ... n
page_id=n-2 1 ... n-3 n-2 n-1 n
page_id=n-1 1 ... n-2 n-1 n
page_id=n 1 ... n-1 n
可以總結出來以下結論：
1.step=1
2.可以看出臨界值是3，也就是threshold=step+
3.以臨界值處理1~threshold的邏輯
//當前頁下於等於臨界值的時候，需要考慮當前頁的下一位情況，展示省略號和尾頁情況
for(var i=1; i<=next; i++) {
if(i == page_id) {
tpl += '<li class="curent">'+i+'</li>';
}else {
tpl += '<li>'+i+'</li>';
}
}
if(next <= last_page-1) {
tpl += '<li>...</li>';
}
if(next != last_page) {
if(last_page == page_id) {
tpl += '<li class="curent">'+last_page+'</li>';
}else {
tpl += '<li>'+last_page+'</li>';
}
}
4.一臨界值處理n-threshold+1~n的邏輯
//當前頁大於n-threshold並且下於n的時候，需要考慮當前頁的上一位情況，展示省略號和首頁情況
if(pre != 1) {
if(1 == page_id) {
tpl += '<li class="curent">1</li>';
}else {
tpl += '<li>1</li>';
}
}
if(pre >= 2) {
tpl += '<li>...</li>';
}
for(var i=pre; i<=last_page; i++) {
if(i == page_id) {
tpl += '<li class="curent">'+i+'</li>';
}else {
tpl += '<li>'+i+'</li>';
}
}
5.中間部分邏輯，就是顯示當前頁的前后step頁，然后是省略號，然后就是首頁、上一頁、下一頁、尾頁的邏輯了。這塊兒比較簡單
//處理中間頁
tpl += '<li>1</li>';
tpl += '<li>...</li>';
for(var i=pre; i<=next; i++) {
if(i == page_id) {
tpl += '<li class="curent">'+i+'</li>';
}else {
tpl += '<li>'+i+'</li>';
}
}
tpl += '<li>...</li>';
tpl += '<li>'+last_page+'</li>';
這樣整個邏輯就大工告成了，例子中是用JS實現的邏輯，這個邏輯可以用在其他的編程語言中。
下面是整個例子的代碼，可以看看整理過程是什么樣的。效果地址:http://cnblogs.sinaapp.com/demo/page.html?step=3&lastPage=20&pageID=10可以通過配置相關數據可以查看效果。
<html>
<head>
<meta charset="utf-8">
<title>分頁邏輯</title>
<style>
.disabled{
color:#ccc;
}
.curent {
color:red;
}
</style>
</head>
<body>
<ul id="pageWrapper"></ul>
<script>
var pageID = queryUrl()['pageID'];
var pageEl = document.getElementById('pageWrapper');
//調用
var page = intoPage(10, pageID);
pageEl.innerHTML = page;
/**
* 解析url
* @param {String} [url] 地址，默認是當前地址
* @return {Object} url參數對象
*/
function queryUrl(url) {
url = url || location.href;
var result = {};
var reg = /(?:(\w+)=(\w+))+/ig;
if(reg.test(url)){
url.replace(reg, function(input, key ,val) {
result[key] = val;
});
}
return result;
}
/**
* 生成分頁
* @param {Number} last_page 總頁數
* @param {Number} page_id 當前頁碼
* @param {Number} [step] 步數 默認是1
* @param {Number} [pageDefault] 完全顯示的頁碼最小值 默認是 2*(step+2)-1
* @return {String} li字符串
*/
function intoPage(last_page, page_id, step, pagesDefault) {
last_page = parseInt(last_page);
page_id = parseInt(page_id);
step = parseInt(step) || 1;
var tpl = '';
var threshold = step + 2; //臨界值
var pre = page_id - step;
var next = page_id + step;
pagesDefault = parseInt(pagesDefault) > 2*threshold-1 ? 2*threshold-1 : 5;
if(page_id == 1) {
tpl += '<li class="disabled">首頁</li>';
tpl += '<li class="disabled">上一頁</li>';
}else if(page_id > 1 && last_page > 1) {
tpl += '<li>首頁</li>';
tpl += '<li>上一頁</li>';
}
if(last_page <= pagesDefault) {
for(var i=1; i<=last_page; i++) {
if(i == page_id) {
tpl += '<li class="curent">'+i+'</li>';
}else {
tpl += '<li>'+i+'</li>';
}
}
}else {
if(page_id <= threshold) {
//處理起始頁
for(var i=1; i<=next; i++) {
if(i == page_id) {
tpl += '<li class="curent">'+i+'</li>';
}else {
tpl += '<li>'+i+'</li>';
}
}
if(next <= last_page-1) {
tpl += '<li>...</li>';
}
if(next != last_page) {
if(last_page == page_id) {
tpl += '<li class="curent">'+last_page+'</li>';
}else {
tpl += '<li>'+last_page+'</li>';
}
}
}else if(page_id > last_page-threshold) {
//處理結束頁
if(pre != 1) {
if(1 == page_id) {
tpl += '<li class="curent">1</li>';
}else {
tpl += '<li>1</li>';
}
}
if(pre >= 2) {
tpl += '<li>...</li>';
}
for(var i=pre; i<=last_page; i++) {
if(i == page_id) {
tpl += '<li class="curent">'+i+'</li>';
}else {
tpl += '<li>'+i+'</li>';
}
}
}else {
//處理中間頁
tpl += '<li>1</li>';
tpl += '<li>...</li>';
for(var i=pre; i<=next; i++) {
if(i == page_id) {
tpl += '<li class="curent">'+i+'</li>';
}else {
tpl += '<li>'+i+'</li>';
}
}
tpl += '<li>...</li>';
tpl += '<li>'+last_page+'</li>';
}
}
if(page_id == last_page) {
tpl += '<li class="disabled">下一頁</li>';
tpl += '<li class="disabled">尾頁</li>';
}else if(last_page > 1 && page_id < last_page) {
tpl += '<li>下一頁</li>';
tpl += '<li>尾頁</li>';
}
return tpl;
}
</script>
</body>
</html>