我們先聲明變量，后面的代碼要用到以下變量。

var curPage = 1; //當前頁碼 var total,pageSize,totalPage; //總記錄數，每頁顯示數，總頁數 
接下來，我們自定義一個函數：getData()，用來獲取當前頁數據。函數中，我們利用$.ajax()向后臺pages.php發送POST異步請求，將當前頁碼以JSON格式傳遞給后臺。
//獲取數據 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>");//顯示加載動畫         },         success:function(json){             $("#list ul").empty();//清空數據區             total = json.total; //總記錄數             pageSize = json.pageSize; //每頁顯示條數             curPage = page; //當前頁             totalPage = json.totalPage; //總頁數             var li = "";             var list = json.list;             $.each(list,function(index,array){ //遍歷json數據列                 li += "<li><a href='#'><img src='"+array['pic']+"'>"+array['title']                 +"</a></li>";             });             $("#list ul").append(li);         },         complete:function(){ //生成分頁條             getPageBar();         },         error:function(){             alert("數據加載失敗");         }     }); } 
請求成功后并返回數據，將相應的數據附給變量，并將返回的商品數據列表循環展示到對應容器#list ul中。當數據完全加載完畢后，調用分頁條函數getPageBar()生成分頁條。
//獲取分頁條 function getPageBar(){     //頁碼大于最大頁數     if(curPage>totalPage) curPage=totalPage;     //頁碼小于1     if(curPage<1) curPage=1;     pageStr = "<span>共"+total+"條</span><span>"+curPage     +"/"+totalPage+"</span>";          //如果是第一頁     if(curPage==1){         pageStr += "<span>首頁</span><span>上一頁</span>";     }else{         pageStr += "<span><a href='javascrJavascript:void(0)' rel='"+(curPage-1)+"'>上一頁</a></span>";     }          //如果是最后頁     if(curPage>=totalPage){         pageStr += "<span>下一頁</span><span>尾頁</span>";     }else{         pageStr += "<span><a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>         下一頁</a></span><span><a href='javascript:void(0)' rel='"+totalPage+"'>尾頁</a>         </span>";     }              $("#pagecount").html(pageStr); } 
最后，當頁面第一次加載時，我們加載第一頁數據即getData(1)，當點擊分頁條中的分頁鏈接時，調用getData(page)加載對應頁碼的數據。我們通過getPageBar()函數已預先在翻頁連接的屬性rel中在埋入了數字頁碼。
$(function(){     getData(1);     $("#pagecount span a").live('click',function(){         var rel = $(this).attr("rel");         if(rel){             getData(rel);         }     }); }); 
pages.php接收每次前端頁面的ajax請求，根據提交的頁碼pageNum值，從mysql數據庫中獲取數據，計算總記錄數和總頁數，讀取對應頁碼下的數據列表，并將最終結果以JSON格式返回給前端頁面。
include_once('connect.php'); //連接數據庫，略過，具體請下載
這時再回到前端頁面，即看到數據已分號頁，點擊“下一頁”看看是不是你要的效果，分頁條的樣式大家可以自己定制，我給的是最基本的樣式。
最后，附上Mysql表結構，下載源碼包中帶數據表哦，^-^都為您準備好了。
CREATE TABLE IF NOT EXISTS `food` (   `id` int(11) NOT NULL AUTO_INCREMENT,   `title` varchar(100) NOT NULL,   `pic` varchar(255) NOT NULL,   PRIMARY KEY (`id`) ) ENGINE=MyISAM  DEFAULT CHARSET=utf8;