jpaginate is a dynamic scrolling paging plugin based on jquery,It behaves like a paging button,It's very interesting that these buttons can be scrolled,You can control the forward and backward scrolling of the buttons by clicking or dragging the small arrows to the sides of the point.

The method to call the jpaginate plugin is simple:

$(elementid) .paginate ()

Property settingThe good news is,jpaginate provides a lot of property configuration,You can easily customize the desired paging effect.

Setting methods such as:

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

count:Number, the total number of records.

start:Number, the number of pages to start showing,For example:3 means start from page 3.

display:Number, the number of pages displayed by the pagination bar,For example:5 means display 5 page numbers at a time.

border:Whether to show 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 you move the mouse to the page number.

text_hover_color:Set the color of the page number when you mouse over the page number.

background_hover_color:Set the color of the page number background when you mouse over the page number.

images:Whether to show page number navigation arrows (direction arrows) (true/false)

mouse:When set to "press", when the mouse moves towards the navigation arrow,The page number scrolls accordingly;When set to "slide", the mouse clicks the navigation arrow once to scroll through the page numbers.

onchange:When you click the page number,Callback.

Example application:php + jquery to achieve ajax paging effectFirst prepare index.php, this page is used to paginate a list of blog posts.

1.Reference 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:<?php echo $page;?> ;,    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?id =" + page);

Note that regarding the plugin's property settings,As detailed above,The attribute count calculates the total number of pages $page through php, this parameter is obtained by article.php. Also note the attribute onchange:when the page number is clicked,call function,This function implements asynchronous submission of page number parameters to article.php for processing.And return the results of the article list to the page,This is ajax. Of course, I ’m just doing a simple demonstration here,If you need more asynchronous effects,You can refer to the jquery documentation.

2, quote css:jpaginate officially provides navigation bar style,You can also write a very cool style yourself.

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

3. The index.php initial page.A preliminary list of articles is required.code show as below

  <h4>demo 3:php + jquery to achieve ajax paging effect</h4>

Add php code in the div with 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 get the page number submitted by index.php,Query the database,The result will be output.code show as below:

include_once ("common.php");//Special file for connecting to the database
$id=$_ get ["id"];//Get page number
$result=$db->select ("article", "id", "cata=1");
$total=$db->db_num_rows ($result);//Total number of records
$pagesize=5;//Number of pages displayed
$page=ceil ($total/$pagesize);//Total number of pages
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>";//Output article list
  • Previous Detailed explanation of $ajax () method parameters in JQuery
  • Next jQuery round trip city and date query examples explain