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

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

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

下圖是第一頁的樣子

這是最后一頁的樣子

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

1 //------------------------------------------------------
2 // pageingBtn() 分頁按鈕的顯示方法
3 // pageIndex: 當前第幾頁
4 // maxPage: 翻頁數(shù)據(jù)集共有多少頁
5 // btnSize: 最多顯示按鈕數(shù)
6 // pageSize: 分頁數(shù)
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 //如果按鈕起始值+最多顯示按鈕數(shù)的和大于最大頁數(shù)就將按鈕起始值設置為最大頁數(shù)減去起始值加一
22 if ((start + btnSize) > maxPage) {
23 start = maxPage - btnSize + 1
24 } //這里處理的情況是如果你的最大顯示按鈕數(shù)為15那么當數(shù)據(jù)分頁最大值為小于15的時候按鈕將會出現(xiàn)-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搜索结果页面下方的分页按钮的生成的全部內容，希望文章能夠幫你解決所遇到的問題。

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