前幾天在做項目的時候 遇到個小問題，就是分頁結果的頁數太多一般5頁到10頁就結束了可是這個分頁結果有400多頁的當時就有些抓狂了，后來想了想模仿搜索引擎的結果頁面對分頁按鈕顯示做了優化代碼如下：

時間緊木有做成JQ插件，通用性可能差一些但是基本功能是有的，比較適合初學者，望老鳥大蝦表拍磚才好

哦少說了一句我用的是 JQueryUI里面的button感覺還不錯

下圖是第一頁的樣子

這是最后一頁的樣子

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

1 //------------------------------------------------------
2 // pageingBtn() 分頁按鈕的顯示方法
3 // pageIndex: 當前第幾頁
4 // maxPage: 翻頁數據集共有多少頁
5 // btnSize: 最多顯示按鈕數
6 // pageSize: 分頁數
7 // keyWord: 關鍵詞
8 // container： 被填充的容器
9 //------------------------------------------------------
10 function pageingBtn(pageIndex, maxPage, btnSize, pageSize, keyWord, container) {
11 var BtnList = '';
12 $(container).html('');
13 if (pageIndex != 1) {
14 BtnList += '<button value="1" class="firstPage"> 第一頁 </button>';
15 var prevPageIndex = ((pageIndex - 1) < 1 ? 1 : (pageIndex - 1));
16 BtnList += '<button value="' + prevPageIndex + '" class="prevPage" > 上一頁 第' + prevPageIndex + '頁</button>';
17 }
18 //此處設置當前頁顯示的樣式
19 var pageIndexStyle = ' class="pageIndex"'; //設定按鈕的起始值
20 var start = (pageIndex - (btnSize / 2 | 0) > 0) ? (pageIndex - (btnSize / 2 | 0)) : 1;
21 //如果按鈕起始值+最多顯示按鈕數的和大于最大頁數就將按鈕起始值設置為最大頁數減去起始值加一
22 if ((start + btnSize) > maxPage) {
23 start = maxPage - btnSize + 1
24 } //這里處理的情況是如果你的最大顯示按鈕數為15那么當數據分頁最大值為小于15的時候按鈕將會出現-7，-6，-5，-4...0,1,2,3,4等很扯的情況
25 start = (start <= 0 ? 1 : start);
26 for (var i = start; i < start + btnSize; i++) {
27 if (i > maxPage) {
28 break;
29 }
30 if (i == pageIndex) {
31 BtnList += '<button value="' + i + '"' + pageIndexStyle + '> ' + i + ' </button>';
32
33 }
34 else {
35 BtnList += '<button value="' + i + '" > ' + i + ' </button>';
36 }
37 }
38 if (pageIndex < maxPage) {
39 var nextPageIndex = ((pageIndex + 1) > maxPage ? maxPage : (pageIndex + 1));
40 BtnList += '<button value="' + nextPageIndex + '" class="nextPage" > 下一頁 第' + nextPageIndex + '頁 </button>';
41 BtnList += '<button value="' + maxPage + '" class="endPage"> 最后一頁 第' + maxPage + '頁 </button>';
42 }
43
44
45 $(container).append(BtnList);
46 //綁定后生成的按鈕事件
47 $(container).find("button").button().click(function () {
48 loadingimg();
49 $.post("/author/query/",
50 {
51 'pageIndex': $(this).val(),
52 'pageSize': pageSize,
53 'order': 'DESC',
54 'sort': '',
55 'KeyWords': keyWord //$("#SearchText").val()
56 },
57 function (data) {
58 $("#SearchText").val(keyWord);
59 LoadBookList(data);
60 }
61 );
62
63 }
64 ); //在此處修改按鈕樣式
65 $(".nextPage").button({ icons: {
66 secondary: "ui-icon-seek-next"
67 }, text: false
68 });
69 $(".prevPage").button({ icons: {
70 primary: "ui-icon-seek-prev"
71 }, text: false
72 });
73 $(".endPage").button({ icons: {
74 secondary: "ui-icon-seek-end"
75 }, text: false
76 });
77 $(".firstPage").button({ icons: {
78 primary: "ui-icon-seek-start"
79 }, text: false
80 });
81 $(".pageIndex ").css({ 'background': '#ff0000', 'color': '#ffffff' });
82 }
83
84

?

轉載于:https://www.cnblogs.com/WoodBean/archive/2012/04/04/WoodBean.html

總結

以上是生活随笔為你收集整理的Ajax搜索结果页面下方的分页按钮的生成的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。