Home > Developer > Web Develop
Function Description:
(1) Set the starting page position and the size of each page;
(2) Binding a custom paging event to hide rows that are not required to be displayed on the current page in the event;
(3) Add a page link to the table;
(4) Bind a linked click event to trigger a table paging event in the event.
：
Implementation code:
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "UTF-8"> <title></title> <Scripttype= "Text/javascript"src=".. /js/jquery-3.2.1.min.js "></Script> <styleMedia= "Screen">Table{Border-collapse:collapse;Border-color:Rgba (205, 193, 222, 0.84); } </style></Head><Body> <TableBorder= "1"> <thead> <TR> <th> Number </th> <th> Language </th> <th> Class </th> </TR> </thead> <tbody> <TR> <TD>c001</TD> <TD>C#</TD> <TD>80</TD> </TR> <TR> <TD>c002</TD> <TD>Java</TD> <TD>70</TD> </TR> <TR> <TD>C003</TD> <TD>Php</TD> <TD>60</TD> </TR> <TR> <TD>c004</TD> <TD>Perl</TD> <TD>50</TD> </TR> </tbody> </Table> <Script>$ (document). Ready (function() { var$table= $('Table'); varcurrentpage= 0; //Current page Index varpageSize= 2; //rows per page (not including header)$table. Bind ('Paging',function(){ //Binding Paging Events //hides all rows, takes out the current page's row display$table. Find ('tbody TR'). Hide (). Slice (currentpage*pageSize, (currentpage+ 1)*pageSize). Show (); }); varsumrows=$table. Find ('tbody TR'). length; //Record Total Rows varsumpages=Math.ceil (sumrows/pageSize);//Total Pages var$pager= $("<div class= ' page ' ></div>");//Pagination Div for(varPageIndex= 0;p Ageindex<Sumpages;pageindex++){ //add links to pagination labels $("<a href= ' # ' ><span>"+(PageIndex+1)+"</span></a>"). Bind ('Click',{'NewPage':p Ageindex},function(event) {CurrentPage=event.data["NewPage"]; $table. Trigger ('Paging'); }). AppendTo ($pager); $pager. Append (" "); } $pager. InsertAfter ($table); //page Out$table. Trigger ('Paging'); //Triggering paging Events }); </Script> </Body></HTML>
"Demo" JQuery set up a simple paging
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
