PHP jQuery Ajax realizes paging effect. Application of jPaginate plug-in, jqueryjpaginate_PHP tutorial

PHP jQuery Ajax implements the paging effect jPaginate plug-in application, jqueryjpaginate

jPaginate is a dynamic scrolling paging plug-in based on jQuery. Its expression is like a paging button, which is very interesting The only thing is that these buttons can be scrolled. You can control the forward and backward scrolling of the buttons by clicking or sliding the mouse towards the small arrows on both sides of the point.

The method to call the jPaginate plug-in is very simple:

$(elementID).paginate() 

Property settings
The good news is that jPaginate provides a lot of attribute configurations, and you can easily customize the paging effect you want.
The setting method is as follows:

$(elementID).paginate({ 
    count:80, 
    start:1, 
    ... }) 

count: Number, total number of records.
start: Number, the page number to start displaying, such as: 3 means starting from page 3.
display: Number, the number of pages displayed in the paging bar, for example: 5 means displaying 5 page numbers at a time.
border: Whether to display the border of the page number. (true/false)
border_color: Set the color of the border, such as "#d3d3d3".
text_color: Set the color of the page number, such as "#68ba64".
background_color: Set the background color of the page number, such as "#f7f7f7".
border_hover_color: Set the color of the page number border when the mouse slides over the page number.
text_hover_color: Set the color of the page number when the mouse slides over the page number.
background_hover_color: Set the color of the page number background when the mouse slides over the page number.
images: Whether to display page navigation arrows (directional arrows) (true/false)
mouse: When set to 'press', when the mouse slides towards the navigation arrow, the page number will scroll; when set to 'slide', when the mouse clicks once on the navigation arrow, the page number will scroll once.
onChange: Callback function when the page number is clicked.
Example application: PHP jQuery implements Ajax paging effect
First prepare index.php, which is used to display a list of blog posts in pages.
1. Quote JS:

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.paginate.js"></script> 
<script type="text/javascript"> 
$(function(){ 
  $("#demo").paginate({ 
    count    : <&#63;php echo $page;&#63;>, 
    start    : 1, 
    display   : 5, 
    border         : true, 
    border_color      : '#BEF8B8', 
    text_color       : '#79B5E3', 
    background_color    : '#E3F2E1',   
    border_hover_color   : '#68BA64', 
    text_hover_color    : '#2573AF', 
    background_hover_color : '#CAE6C6', 
    images         : false, 
    mouse          : 'press', 
    onChange        : function(page){ 
                  $("#pagetxt").load("article.php&#63;id="+page); 
                 } 
  }); 
}); 
</script> 

Note that the attribute settings of the plug-in have been introduced in detail above. The attribute count calculates the total number of pages $page through PHP. This parameter is obtained by article.php. What should also be explained is the attribute onChange: when the page number is clicked, a function is called. This function implements asynchronous submission of page number parameters to article.php for processing. article.php reads the table books in the database and puts the obtained article list results And to return to the page, this is Ajax. Of course, I am just doing a simple demonstration here. If you need more asynchronous effects, you can refer to the jQuery usage documentation.
2. Quote CSS:
jPaginate officially provides navigation bar styles, and you can also write a very cool style yourself.

<link rel="stylesheet" type="text/css" href="style.css" /> 

3. Index.php initial page.
An initial article list must be displayed, the code is as follows

<div class="demo"> 
  <h4 id="Demo-Php-jQuery实现AJAX-分页效果">Demo 3： Php+jQuery实现AJAX 分页效果</h4> 
  <div id="pagetxt"> 
    
  </div> 
  <div id="demo"></div> 
</div> 

Add PHP code in the DIV with the ID pagetxt:

$query=$db->select("article","id,title,pubdate","cata=1 order by id desc limit 0,5"); 
while($row=$db->fetch_array($query)){ 
   $pubdate=date("Y-m-d",$row[pubdate]); 
   echo "<p><span>$pubdate</span><a href='view-blog-".$row[id].".html' target='_blank'> 
".$row[title]."</a></p>"; 

4. article.php code.

This code is used to obtain the page number submitted by index.php, query the database, and output the results. The code is as follows:

include_once("common.php"); //连接数据库专用文件 
 
$id=$_GET['id']; //获取页码 
$result = $db->select("article", "id", "cata=1"); 
$total = $db->db_num_rows($result); //总记录数 
 
$pagesize=5; //每页显示数 
$page=ceil($total/$pagesize); //总页数 
if(isset($id)){ 
  $startPage=($id-1)*$pagesize; 
  $query=$db->select("article","id,title,pubdate","cata=1 order by id desc limit $startPage, 
$pagesize"); 
  while($row=$db->fetch_array($query)){ 
   $pubdate=date("Y-m-d",$row[pubdate]); 
   echo "<p><span>$pubdate</span><a href='view-blog-".$row[id].".html' target='_blank'> 
".$row[title]."</a></p>"; //输出文章列表 
  } 
} 

The above introduces the application of jPaginate plug-in in PHP jQuery to achieve Ajax paging effect. I hope it will be helpful to everyone's learning.

http://www.bkjia.com/PHPjc/1058142.htmlwww.bkjia.comtruehttp: //www.bkjia.com/PHPjc/1058142.htmlTechArticlePHP jQuery Ajax implements the paging effect jPaginate plug-in application, jqueryjpaginate jPaginate is a dynamic scrolling paging plug-in based on jQuery, its The expression is like a paging button, not...