Jquery's dynamic paging effect is comparable to that of Time Network, while jquery is comparable

Jquery's dynamic paging effect is comparable to that of Time Network, while jquery is comparable

I have been studying the paging Effect of jquery recently. I just got one and I will share it with you. The paging effect is similar to that of Time Network.

First, put a <div class = "pageDivs"> </div> On the aspx page, which is used to store pages.

Create a page. js file. The specific code is as follows (the css class used in js is set by yourself. This is not provided here. You can set the css style yourself ):
Copy codeThe Code is as follows:
$ (Document). ready (function (){
Var pageCount = 0; // the total number of pages, which is set in the data processing function.

//// // Display the right button on a page
Function right (pageCount, limit, rlimit ){
Var html = "";
If (parseInt (pageCount)-limit> = rlimit ){
For (var I = parseInt (pageCount)-rlimit + 1; I <= parseInt (pageCount); I ++ ){
Html + = "<a page =" + I + "leaf = 'leaf'>" + I + "</a> ";}
}
Else {
For (var I = parseInt (limit) + 1; I <= pageCount; I ++ ){
Html + = "<a page =" + I + "leaf = 'leaf'>" + I + "</a> ";}
}
Return html;
}
//// // Homepage, last page, previous page, and next page
Function changeState (pageIndex, pageCount ){
Var $ button1 = $ ("div. pageDivs"). find ("# Button1"); // Previous Page
Var $ button2 = $ ("div. pageDivs"). find ("# Button2"); // next page
Var $ first = $ ("div. pageDivs"). find ("# First"); // Homepage
Var $ last = $ ("div. pageDivs"). find ("# Last"); // the last page.
If (parseInt (pageIndex) = 1 ){
Define first.css ("display", "none ");
Required button1.css ("display", "none ");}
Else {
Define first.css ("display", "inline ");
Using button1.css ("display", "inline ");
$ First. attr ("page", 1 );
$ Button1.attr ("page", parseInt (pageIndex)-1 );}
If (parseInt (pageIndex) = pageCount ){
Using button2.css ("display", "none ");
Export last.css ("display", "none ");}
Else {
$Last.css ("display", "inline ");
Using button2.css ("display", "inline ");
$ Last. attr ("page", pageCount );
$ Button2.attr ("page", parseInt (pageIndex) + 1 );}

}
/// // The number of pages displayed on the left of the dynamic page of a span, the number of page numbers displayed on the right. limit> rlimit is required.
Function span (pageCount, pageIndex, limit, rlimit ){
Var isContinue = true; // indicates whether to continue executing the function.
Var html = "<a id = 'first' href = '#'> | </a> <a id = 'button1' href = '#'> </> ";
Var change = (parseInt (pageCount)-parseInt (rlimit)/(parseInt (limit)-2); // indicates the number of times the page number can be changed
If (pageCount! = 0 & pageCount! = 1 ){
If (pageCount <= limit ){
For (var I = 1; I <= pageCount; I ++ ){
Html + = "<a page =" + I + "leaf = 'leaf'>" + I + "</a> "}
}
Else {
If (parseInt (pageIndex) <(limit-2 )){
For (var I = 1; I <= limit; I ++ ){
Html + = "<a page =" + I + "leaf = 'leaf'>" + I + "</a> ";}
Html + = "...";
Html + = right (pageCount, limit, rlimit );
}
Else {
If (parseInt (pageIndex) % (limit-2) = 0 ){
If (parseInt (pageIndex)/(limit-2) <= change & parseInt (pageIndex)-1 + parseInt (limit)-1 <= parseInt (pageCount) -parseInt (rlimit )){
For (var I = parseInt (pageIndex)-1; I <parseInt (pageIndex)-1 + limit; I ++ ){
Html + = "<a page =" + I + "leaf = 'leaf'>" + I + "</a> ";}
Html + = "...";
Html + = right (pageCount, limit, rlimit );
}
Else {
For (var I = 1; I <= rlimit; I ++ ){
Html + = "<a page =" + I + "leaf = 'leaf'>" + I + "</a> ";}
Html + = "...";
Var rest = parseInt (pageCount)-parseInt (rlimit );
If (rest <limit ){
For (var I = parseInt (rlimit) + 1; I <= parseInt (pageCount); I ++ ){
Html + = "<a page =" + I + "leaf = 'leaf'>" + I + "</a> ";}
}
Else {
Var start = parseInt (pageCount)-parseInt (limit) + 1;
For (var I = start; I <= pageCount; I ++ ){
Html + = "<a page =" + I + "leaf = 'leaf'>" + I + "</a> ";}
}
}

}
Else {
Html = $ ("div. pageDivs" ).html ();
$ ("Div. pageDivs" ).html (html );
IsContinue = false;
}
}

}
}
If (isContinue ){
Html + = "<a id = 'button2' href = '#'> </a> <a id = 'last' href = '#' >>|</> ";
$ ("Div. pageDivs" ).html (html );}
ChangeState (pageIndex, pageCount );
$ ("Div. pageDivs "). find ("a [page =" + parseInt (pageIndex) + "]: visible "). removeAttr ("href "). removeClass ("disabled "). addClass ("current "). siblings ("a [page: visible "). removeClass ("current "). addClass ("disabled "). attr ("href ","#");
}

Function page (pageIndex ){

/////////// Display your specific data here and use ajax to dynamically load and process data

PageCount = "Total number of pages obtained through data processing ";

Span (pageCount, pageIndex,); // call the paging effect. Here, seven pages are displayed on the left and two pages are displayed on the right.

}

//// // The page number binding event

$ ("Div. pageDivs"). find ("a: visible"). live ("click", function (){
Var result = $ (this). attr ("page ");
If (typeof $ (this). attr ("leaf "))! = 'Undefined '){
$ (This ). removeAttr ("href "). removeClass ("disabled "). addClass ("current "). siblings (). removeClass ("current "). addClass ("disabled "). attr ("href ","#");}

Page (result );
});
});

In this way, the above paging algorithms can be encapsulated and have nothing to do with specific projects. They can be used in general.

JQuery, table, josn, dynamic generation of pages

<Table cellpadding = "0" cellspacing = "0" border = "0" id = "shop">
<Thead>
<Tr>
<Th> </th>
<Th> Title </th>
<Th> Author (s) </th>
<Th> Publish Date </th>
<Th> Price </th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td>

</Td>
<Td> E. It's a waste of time to see Friday as a European method </td>
<Td> Nagen Graf </td>
<Td> May 1, 2004 </td>
<Td> $50.09 </td>
</Tr>
<Tr>
</Tbody>
</Table>
<Script type = "text/javascript">
$ (Document). ready (function ()
{
Var $ table = $ ('table ');
// Paging Effect
Var currentPage = 0; // current page
Var pageSize = 10; // The number of rows per page (excluding the header)
// Bind a paging event
$ Table. bind ('repaginate', function ()
{
$ Table. find ('tbody tr'). hide ()
. Slice (currentPage * pageSize, (currentPage + 1) * pageSize). show ();
});

Var numRows = $ table. find ('tbody tr'). length; // number of records
Var numPages = Math. ceil (numRows/pageSize);/...... the remaining full text>

Jquery + Json foreground Table dynamic Paging

You and I do almost the same thing.
In <Table id = "text">
</Table>
Others are dynamically generated.

In Javascript:

Var tblHead = "<thead> <th>... </th> </thead> ";
Var tblRow = "<tbody> ";
// Here insert JSON objects into each row by a look or by Jquery. each ()
TblRow + = .....;
// End of the loop

TblRow + = "</tbody> ";
$ (TblHead). appendTo ("# test ");
$ (TblRow). appendTo ("resultsTable tbody ");
Ps: If you need to modify contents later, the subsequent method needs to be written in the function above. Because it is dynamic, I called Jquery libray $, saving documents. getElementById (getElementTagName)