Jquery+ajax+php+mysql implementation of pagination display data instance explanation _jquery

This article uses jquery, combined with PHP and MySQL, to illustrate how to implement AJAX data loading effects with examples.

Html

<div id= "List" > 
 <ul></ul> 
</div> 
<div id= "PageCount" ></div> 

Page, #list用来展示数据列表, including the picture and title of the product that you want to show in this example, #pagecount用来展示分页条, that is, the previous page in this example, and the next page.
Of course, don't forget to load the jquery library file in the head.
CSS
We need to arrange the merchandise picture and set the pagination style, of course, the design of these styles can be based on the data after the successful reading, in this case, we first post the CSS code.

#list {width:680px; height:530px; margin:2px auto; position:relative} 
#list ul li{float:left;width:220px; height : 260px; MARGIN:2PX} 
#list ul li img{width:220px height:220px} 
#list ul li p{line-height:22px} 
#pagecount {width : 500px; margin:10px Auto; Text-align:center} 
#pagecount span{margin:4px font-size:14px} 
#list ul li#loading{width:120px; height:32px ; border:1px solid #d3d3d3; 
Position:absolute; top:35%; left:42%; Text-align:center; Background: #f7f7f7 
url (loading.gif) no-repeat 8px 8px;-moz-box-shadow:1px 1px 2px rgba (0,0,0,.2); 
-webkit-box-shadow:1px 1px 2px Rgba (0,0,0,.2); box-shadow:1px 1px 2px Rgba (0,0,0,.2);} 
Jquery

We first declare the variable, and the following code uses the variables below.

var curpage = 1; Current page number 
var total,pagesize,totalpage//Total record number, per page display, total number of pages 

Next, we customize a function: GetData (), which is used to get the current page data. function, we use $.ajax () to send a post asynchronous request to the background pages.php to pass the current page number in JSON format to the background.

Gets data 
function GetData (page) { 
 $.ajax ({ 
  type: ' POST ', 
  URL: ' pages.php ', 
  data: {' pagenum ': Page-1}, 
  dataType: ' json ', 
  beforesend:function () { 
   $ ("#list ul"). Append ("<li id= ' loading ' > Loading...</li> ")//Show load Animation 
  }, 
  success:function (JSON) { 
   $ (" #list ul "). Empty ()//Empty data area 
   Total = Json.total; Total number of records 
   pageSize = json.pagesize;//per page display bar 
   curpage = page;//Current page 
   totalpage = json.totalpage; 
   //Total page number var li = ""; 
   var list = json.list; 
   $.each (List,function (Index,array) {//Traversal JSON data column 
    Li + + <li><a href= ' # ' ></li>"; 
   }; 
   $ ("#list ul"). Append (li); 
  }, 
  complete:function () {//Raw ingredient page 
   getpagebar (); 
  }, 
  error: function () { 
   alert ("Data load Failed");}} 
 

After the request succeeds and returns the data, the corresponding data is attached to the variable, and the returned merchandise data list is circulated to the corresponding container #list ul. When the data is fully loaded, the paging function Getpagebar () the page bar is invoked.

//Get page bar function Getpagebar () {//page number greater than maximum page if (curpage>totalpage) curpage=totalpage; 
 The page number is less than 1 if (curpage<1) curpage=1; 
  
 Pagestr = "<span> altogether" +total+ "strip </span><span>" +curpage + "/" +totalpage+ "</span>"; 
 If it is the first page if (curpage==1) {pagestr + = "<span> home </span><span> prev </span>"; }else{Pagestr + + <span><a href= ' javascript:void (0) ' rel= ' 1 ' > Home </a></span> <span>< 
 A href= ' javascript:void (0) ' rel= ' "+ (curPage-1) +" ' > Prev </a></span> "; 
 //If is the last page if (curpage>=totalpage) {pagestr = "<span> next </span><span> last </span>"; }else{Pagestr + + <span><a href= ' javascript:void (0) ' rel= ' "+ (parseint (curpage) +1) +" ' > Next </a>< 
 /span><span><a href= ' javascript:void (0) ' rel= ' "+totalpage+" ' > Last </a> </span> '; 
$ ("#pagecount"). HTML (PAGESTR); } 

Finally, when the page first loads, we load the first page of data, that is, GetData (1), and when clicked on the paging link in the page bar, call GetData (page) to load the corresponding page number data. We have already buried the number page numbers in the property rel of the paging connection through the Getpagebar () function.

$ (function () { 
 getData (1); 
 $ ("#pagecount span a"). Live (' click ', Function () { 
  var rel = $ (this). attr ("rel"); 
  if (rel) { 
   getData (rel);}}); 
 

Php
Pages.php receives AJAX requests for each front-end page, obtains data from the MySQL database, calculates the total number of records and total pages, reads the list of data under the corresponding page number, and returns the final result in JSON format to the front page, based on the number of pages submitted pagenum.

Include_once (' connect.php '); Connect the database, skip, please download the source view 
 
$page = intval ($_post[' pagenum '));//Current page 
 
$result = mysql_query ("Select ID from Food"); 
$total = mysql_num_rows ($result);//total record number 
$pageSize = 6;//per page display number 
$totalPage = ceil ($total/$pageSize);/Total Pages 
 
$startPage = $page * $pageSize; Start record 
//construct array 
$arr [' total '] = $total; 
$arr [' pageSize '] = $pageSize; 
$arr [' totalpage '] = $totalPage; 
$query = mysql_query ("Select Id,title,pic from food ORDER by ID ASC limit 
$startPage, $pageSize");//Query paging data 
Whil E ($row =mysql_fetch_array ($query)) { 
  $arr [' list '] = Array ( 
   ' id ' => $row [' id '], 
  ' title ' => $row [ ' title '], 
  ' pic ' => $row [' pic '] 
  ; 
} 
echo Json_encode ($arr); Output JSON data 

Then back to the front page, that is, see the data has a semicolon page, click on the "next" to see if you want the effect, view demo, pagination style You can customize, I give the most basic style.
Finally, attach the MySQL table structure, download the source package with the data table Oh, ^-^ are ready for you.

CREATE TABLE IF not EXISTS ' food ' ( 
 ' id ' int (one) not null auto_increment, 
 ' title ' varchar (m) not NULL, 
 ' pic ' varchar (255) Not NULL, 
 PRIMARY KEY (' id ') 

The above is about JQUERY+AJAX+PHP+MYSQL implementation of pagination display data examples to explain, Ajax paging effect so that your site data loading appears very fluent, I hope this article for everyone's learning help.