Of Stack

Analysis of the usage of jQuery paging plug in jquery. pagination. js

  • 2021-07-18 06:37:39
  • OfStack

jquery. pagination. js plug-in, this jQuery plug-in is Ajax paging plug-in, which loads all data once, so there is no refresh and delay when paging switching, but only rewrites html content in the specified dom element. If the amount of data is large, this method is not recommended, because loading will be slow;

Most plug-ins of jQuery are relatively simple to use, and relevant api can be found, and demo;;

To use this plug-in, first introduce its js, css files into the pages (jsp, html) 


<link href="/ Custom road strength /jquery.pagination/pagination.css" rel="external nofollow" rel="stylesheet">
<script src="/ Custom path /jquery.pagination/jquery.pagination.js" type="text/javascript"></script>

Specific code: 


<html> 
 <body> 
  <div id="table"> 
   <div id="result"> 
     Data after query  
   </div> 
   <!-- Paging div When used, only this part is needed --> 
   <div class="cl"> 
    <div class="pagination" id="pageDiv"></div><!--id You can customize it --> 
   </div> 
  </div> 
   
 <body> 
 <script> 
  //  Create a page  
  $("#pageDiv").pagination(${p.totalPage}, { 
   num_edge_entries: 1, // Number of paged entries displayed on both sides  
   num_display_entries: 4, // Number of paging entries displayed in the main part of continuous paging  
   callback: function(){// Callback function,  
     //setLinkTo();// Custom function: A certain behavior  
   }, 
   link_to: "#",// Paged links  
   current_page: ${p.pageNo},// Current page  
   prev_text : "<  Upper 1 Page ",// Custom on 1 Page label  
   next_text : " Under 1 Page  >",// Custom " 1 Page label  
   first_text: "<i class='begin_page'> Home page </i>", // Whether to display the home page button, the default is true ;  
   last_text: "<i class='last_page'> Last page </i>", // Whether to display the tail page button, the default is true ;  
   items_per_page: ${p.pageSize}, // Number of entries displayed per page (pageSize) 
   toPage: false // Whether to show which page to jump to, the default is true ;  
  }); 
 </script> 
</html>

Because of its unique paging logic, when using this plug-in, we need to be careful, so as not to be inconsistent with the paging logic of the application background and cause unnecessary development twice.

The use of any plug-in needs to be flexible, take what you need: for example, when our application has used a front-end paging plug-in, but likes the style of jquery. pagination plug-in, at this time, we only need to use its style file, and then adjust the original paging plug-in source code appropriately. There is no need to overturn our original paging logic and use plug-ins to satisfy plug-ins. And 1 is to use plug-ins to satisfy us.

For more exciting content, please click: jquery paging function summary to learn.

Related articles: