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 '});
}