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

Source: Internet
Author: User

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)

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.