Html
CSS #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:10p x 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 declare variables, and the following code will use the variables below. var curpage = 1; Current page number Var total,pagesize,totalpage; Total records, display per page, total 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, passing the current page number in JSON format to the background. Get Data Function GetData (page) {$.ajax ({type: ' POST ', url: ' pages.php ', data: {' Pagenum ':p age-1}, DataType: ' JSON ', before Send:function () {$ ("#list ul"). Append ("
Loading ...");//Display load animation}, Success:function (JSON) {$ (" #list ul "). empty ();//empty data area total = Json.total; Total number of records pageSize = Json.pagesize; Show number of bars per page curpage = page; Current page totalpage = Json.totalpage; Total pages var li = ""; var list = Json.list; $.each (List,function (Index,array) {//Traverse JSON data column Li + = "
"+array[' title '] +""; }); $ ("#list ul"). Append (LI); }, Complete:function () {//RAW ingredient page strip Getpagebar (); When you click the paging link in the paging bar, call GetData (page) to load the data for the corresponding page number. $ ("#pagecount span a"). On (' click ', function () {var rel = $ (this). attr ("rel"); if (rel) {getData (rel); } }); }, Error:function () {alert ("Data load Failed");}}); After the request succeeds and returns the data, the corresponding data is appended to the variable and the returned commodity data list is recycled to the corresponding container #list ul. When the data is fully loaded, call the paging bar function Getpagebar () raw page bar. Gets the paging bar function Getpagebar () {///page number greater than the maximum pages if (curpage>totalpage) curpage=totalpage;//page number less than 1 if (curpage<1) curpage = 1; Pagestr = "Total "+total+" bar"+curpage +"/"+totalpage+""; If it is the first page if (curpage==1) {pagestr + = "Home PagePrevious Page"; } else{Pagestr + = "Home Page Previous Page"; } If this is the last page if (curpage>=totalpage) {pagestr + = "Next Pagelast page"; } else{Pagestr + = "Next Pagelast page"; } $ ("#pagecount"). HTML (PAGESTR); Finally, when the page loads for the first time, we load the first page of data, which is getData (1), $ (function () {getData (1);}); Phppages.php receives AJAX requests for each front-end page, fetches data from the MySQL database based on the submitted page Pagenum value, 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. Include_once (' connect.php '); Connect the database, skip, please download source view $page = Intval ($_post[' pagenum '); Current page $result = mysql_query ("Select ID from Food"); $total = mysql_num_rows ($result);//total record Count $pageSize = 6; Number of displays per page $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 the food Order by ID ASC limit $startPage, $pageSize"); Query the paging data while ($row =mysql_fetch_array ($query)) {$arr [' list '] [] = array (' id ' = = $row [' id '], ' title ' + = $row [' title ' Pic ' = $row [' pic '],); } Echo Json_encode ($arr); Output JSON data Finally, attach MySQL table structure CREATE table IF not EXISTS ' food ' (' id ' int (one) not NULL auto_increment, ' title ' varchar NULL, ' pic ' varchar (255) Not NULL, PRIMARY KEY (' id ')) engine=myisam DEFAULT Charset=utf8;
Php+jquey+ajax Implementing paging
