Ajax搜尋結果頁面下方的分頁按鈕的產生

來源:互聯網
上載者:User

時間緊木有做成JQ外掛程式,通用性可能差一些但是準系統是有的,比較適合初學者,望老鳥大蝦表拍磚才好
哦少說了一句我用的是 JQueryUI裡面的button感覺還不錯
是第一頁的樣子

這是最後一頁的樣子

廢話不說了上代碼上面有參數說明看不懂的歡迎留言 複製代碼 代碼如下://------------------------------------------------------
// pageingBtn() 分頁按鈕的顯示方法
// pageIndex: 當前第幾頁
// maxPage: 翻頁資料集共有多少頁
// btnSize: 最多顯示按鈕數
// pageSize: 分頁數
// keyWord: 關鍵詞
// 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>';
}
//此處設定當前頁顯示的樣式
var pageIndexStyle = ' class="pageIndex"'; //設定按鈕的起始值
var start = (pageIndex - (btnSize / 2 | 0) > 0) ? (pageIndex - (btnSize / 2 | 0)) : 1;
//如果按鈕起始值+最多顯示按鈕數的和大於最大頁數就將按鈕起始值設定為最大頁數減去起始值加一
if ((start + btnSize) > maxPage) {
start = maxPage - btnSize + 1
} //這裡處理的情況是如果你的最大顯示按鈕數為15那麼當資料分頁最大值為小於15的時候按鈕將會出現-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' });
}
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.