Ajax搜索結(jié)果頁面下方的分頁按鈕的生成

更新時間：2012年04月05日 23:16:57 作者：

前幾天在做項目的時候遇到個小問題，就是分頁結(jié)果的頁數(shù)太多一般5頁到10頁就結(jié)束了可是這個分頁結(jié)果有400多頁的當(dāng)時就有些抓狂了，后來想了想模仿搜索引擎的結(jié)果頁面

時間緊木有做成JQ插件，通用性可能差一些但是基本功能是有的，比較適合初學(xué)者，望老鳥大蝦表拍磚才好
哦少說了一句我用的是 JQueryUI里面的button感覺還不錯
下圖是第一頁的樣子

這是最后一頁的樣子

廢話不說了上代碼上面有參數(shù)說明看不懂的歡迎留言

復(fù)制代碼代碼如下:

 
//------------------------------------------------------ 
// pageingBtn() 分頁按鈕的顯示方法 
// pageIndex: 當(dāng)前第幾頁 
// maxPage: 翻頁數(shù)據(jù)集共有多少頁 
// btnSize: 最多顯示按鈕數(shù) 
// pageSize: 分頁數(shù) 
// keyWord: 關(guān)鍵詞 
// container： 被填充的容器 
//------------------------------------------------------ 
function pageingBtn(pageIndex, maxPage, btnSize, pageSize, keyWord, container) { 
var BtnList = ''; 
$(container).html(''); 
if (pageIndex != 1) { 
BtnList += '<button value="1" class="firstPage"> 第一頁 </button>'; 
var prevPageIndex = ((pageIndex - 1) < 1 ? 1 : (pageIndex - 1)); 
BtnList += '<button value="' + prevPageIndex + '" class="prevPage" > 上一頁 第' + prevPageIndex + '頁</button>'; 
} 
//此處設(shè)置當(dāng)前頁顯示的樣式 
var pageIndexStyle = ' class="pageIndex"'; //設(shè)定按鈕的起始值 
var start = (pageIndex - (btnSize / 2 | 0) > 0) ? (pageIndex - (btnSize / 2 | 0)) : 1; 
//如果按鈕起始值+最多顯示按鈕數(shù)的和大于最大頁數(shù)就將按鈕起始值設(shè)置為最大頁數(shù)減去起始值加一 
if ((start + btnSize) > maxPage) { 
start = maxPage - btnSize + 1 
} //這里處理的情況是如果你的最大顯示按鈕數(shù)為15那么當(dāng)數(shù)據(jù)分頁最大值為小于15的時候按鈕將會出現(xiàn)-7，-6，-5，-4...0,1,2,3,4等很扯的情況 
start = (start <= 0 ? 1 : start); 
for (var i = start; i < start + btnSize; i++) { 
if (i > maxPage) { 
break; 
} 
if (i == pageIndex) { 
BtnList += '<button value="' + i + '"' + pageIndexStyle + '> ' + i + ' </button>'; 
} 
else { 
BtnList += '<button value="' + i + '" > ' + i + ' </button>'; 
} 
} 
if (pageIndex < maxPage) { 
var nextPageIndex = ((pageIndex + 1) > maxPage ? maxPage : (pageIndex + 1)); 
BtnList += '<button value="' + nextPageIndex + '" class="nextPage" > 下一頁 第' + nextPageIndex + '頁 </button>'; 
BtnList += '<button value="' + maxPage + '" class="endPage"> 最后一頁 第' + maxPage + '頁 </button>'; 
} 
$(container).append(BtnList); 
//綁定后生成的按鈕事件 
$(container).find("button").button().click(function () { 
loadingimg(); 
$.post("/author/query/", 
{ 
'pageIndex': $(this).val(), 
'pageSize': pageSize, 
'order': 'DESC', 
'sort': '', 
'KeyWords': keyWord //$("#SearchText").val() 
}, 
function (data) { 
$("#SearchText").val(keyWord); 
LoadBookList(data); 
} 
); 
} 
); //在此處修改按鈕樣式 
$(".nextPage").button({ icons: { 
secondary: "ui-icon-seek-next" 
}, text: false 
}); 
$(".prevPage").button({ icons: { 
primary: "ui-icon-seek-prev" 
}, text: false 
}); 
$(".endPage").button({ icons: { 
secondary: "ui-icon-seek-end" 
}, text: false 
}); 
$(".firstPage").button({ icons: { 
primary: "ui-icon-seek-start" 
}, text: false 
}); 
$(".pageIndex ").css({ 'background': '#ff0000', 'color': '#ffffff' }); 
} 