The page button generated _jquery the AJAX search results page

Source: Internet
Author: User
Tags prev
Time tight wood has made JQ plug-ins, versatility may be poor some but the basic function is some, more suitable for beginners, look at the old bird prawn table Pat Brick is good
Oh, one less word, I used the button inside the jQueryUI, and it felt good.
The image below is the first page.

This is the last page.

No, no, no, no, No. The code above has parameters to explain.
Copy Code code as follows:

//------------------------------------------------------
PAGEINGBTN () Paging button display method
PageIndex: Current first few pages
Maxpage: How many pages are there in the paging dataset
Btnsize: Maximum number of buttons displayed
PageSize: page-Number
KeyWord: Key Words
Container: Filled container
//------------------------------------------------------
function pageingbtn (PageIndex, Maxpage, Btnsize, PageSize, KeyWord, container) {
var btnlist = ';
$ (container). HTML (');
if (PageIndex!= 1) {
Btnlist + + <button value= "1" class= "FirstPage" > First page </button> ';
var Prevpageindex = ((pageIndex-1) < 1 1: (pageIndex-1));
Btnlist + = ' <button value= ' + prevpageindex + ' "class=" prevpage "> prev ' + prevpageindex + ' page </button> ';
}
This sets the style that the current page displays
var pageindexstyle = ' class= ' PageIndex '; Set the starting value of the button
var start = (PageIndex-(BTNSIZE/2 | 0) > 0)? (PageIndex-(BTNSIZE/2 | 0)): 1;
Set the start value of the button to the maximum number of pages minus the starting value plus a
if ((Start + btnsize) > Maxpage) {
Start = maxpage-btnsize + 1
///The case here is if your maximum display button number is 15 then when the data paging maximum is less than 15, the button will appear -7,-6,-5,-4...0,1,2,3,4, etc.
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 "> Next page" + nextpageindex + ' page </button> ';
Btnlist + = ' <button value= ' + maxpage + ' "class=" endpage "> Last page" + maxpage + ' page </button> ";
}
$ (container). append (btnlist);
Button events generated after binding
$ (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);
}
);
}
); Modify button style here
$ (". 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 '});
}
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

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.