Home  >  Article  >  Web Front-end  >  jQuery plug-in pagination to achieve paging effects_jquery

jQuery plug-in pagination to achieve paging effects_jquery

WBOY
WBOYOriginal
2016-05-16 16:04:401228browse

Practical jQuery paging effects plug-in jquery.pagination.js, based on jQuery implementation, can call dynamic data through ajax according to the pageselectCallback function callback call. The current method is to generate JSON data to a JS file. The called data is JSON format data. Disadvantages The data is read out at once, so the efficiency will be lower. The plug-in supports custom configuration functions for many parameters, which is still very good. You can improve it according to your own ideas.

Usage:

1. Load plug-ins and jQuery

<link rel="stylesheet" href="pagination.css"> 
<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="jquery.pagination.js"></script> 

2.HTML content

Copy code The code is as follows:

f0d136d5c4d2d19a8784317067550f8b16b28748ea4df4d9c2150843fecfba68

3. Function call

<script type="text/javascript"> 
function pageselectCallback(page_index, jq){ 
        alert(page_index); 
        return false; 
      } 
$(document).ready(function(){ 
$(".pagination").pagination(100, { 
  callback: pageselectCallback, 
  
   num_edge_entries: 1, 
  
  }); 
}); 
</script> 

Parameter configuration explanation

Parameter name Parameter description Optional value Default value

callback The callback function for clicking the paging button function function(){return false;}
current_page The page number selected during initialization Number 0
items_per_page Number of records displayed per page Number 10
link_to paging link string #
num_display_entries Maximum number of displayed pages Number 11
next_text The text displayed on ‘next page’ string Next
next_show_always If set to false, the 'next page' button will only be displayed if the page number can still be increased. Boolean value true
prev_show_always If set to false the 'previous' button will only be displayed if it can also navigate to the previous page boolean true
prev_text Text displayed on ‘previous page’ String Previous
If num_edge_entries is set to 1, the first and last pages will always be displayed 1 or 0 0
ellipse_text Identification string from the current page segment to the first or last page String …
load_first_page If set to true, the callback function will be executed when the plugin is initialized Boolean true

View DEMO Plug-in download

The above is the entire content of this article, I hope you all like it.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn