最近在接觸jquery和ajax，當前項目也會用到分頁，為了用戶體驗更好一些，就准備用無刷新分頁，這個demo很適合新手學習查看，寫的比較清晰，話不多說，直接上代碼吧。
首先是html頁面，index.html，代碼如下：
php+mysql+ajax+jquery分頁
樣式我隨便寫的，畢竟我樣式寫的很差，大家可以自己換樣式的。
然後就是js代碼了，ajaxPager.js，代碼如下：
curPage = 1;
type: 'POST' url: 'pages.php' data: {'pageNum':page-1 dataType:'json' beforeSend: $("#loading").html("<img id='loadin'g src='loading.gif'>" success: $("#loading").html("" $("#list ul" total = json.total;
pageSize = json.pageSize;
curPage = page;
totalPage = json.totalPage;
li = "" list = $.each(list,(index,array){
li += "<li><a href='#'><img src='"+array['pic']+"'></a><p>"+array['title'].substring(0,10)+"</p></li>" $("#list ul" complete:(){
error: alert("數據加載失敗"
(curPage>totalPage) curPage=
(curPage<1) curPage=1 pageStr = "<span class=''>共"+total+"條"+curPage+"/"+totalPage+"</span>"
(totalPage<=4 (curPage==1 pageStr += "<span class='cur'>1</span>" ( i=2;i<=totalPage;i++ pageStr += "<a href='javascript:void(0)' rel='"+i+"'>"+i+"</a>" } pageStr += "<a href='javascript:void(0)' rel='1'><<</a><a href='javascript:void(0)' rel='"+(curPage-1)+"'><</a>" ( i=1;i<=totalPage;i++ (i== pageStr += "<span class='cur'>"+i+"</span>"
pageStr += "<a href='javascript:void(0)' rel='"+i+"'>"+i+"</a>"
(curPage<=3 (curPage==1 pageStr += "<span class='cur'>1</span>"
pageStr += "<a href='javascript:void(0)' rel='1'><<</a><a href='javascript:void(0)' rel='"+(curPage-1)+"'><</a>" pageStr += "<span class='cur'><a href='javascript:void(0)' rel='1'>1</a></span>" ( i=2;i<=4;i++ (i== pageStr += "<span class='cur'>"+i+"</span>"
pageStr += "<a href='javascript:void(0)' rel='"+i+"'>"+i+"</a>" pageStr += "<span class='cur'>...</span>" } pageStr += "<a href='javascript:void(0)' rel='1'><<</a><a href='javascript:void(0)' rel='"+(curPage-1)+"'><</a>" pageStr += "<span class='cur'>...</span>" (curPage>totalPage-2 ( i=totalPage-2;i<=totalPage;i++ (i== pageStr += "<span class='cur'>"+i+"</span>"
pageStr += "<a href='javascript:void(0)' rel='"+i+"'>"+i+"</a>"
pageStr += "<a href='javascript:void(0)' rel='"+(curPage-1)+"'>"+(curPage-1)+"</a>" pageStr += "<span class='cur'>"+curPage+"</span>" pageStr += "<a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>"+(parseInt(curPage)+1)+"</a>" pageStr += "<span class='cur'>...</span>"
(curPage>=
} pageStr += "<a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>></a><a href='javascript:void(0)' rel='"+totalPage+"'>>></a>"
$("#pagecount"
$( getData(1 $("#pagecount a").live('click', rel = $().attr("rel" });
因為項目的需要，我這個頁面頁數顯示只能顯示幾頁，比如就這樣 << < ... 5 6 7 ... > >>，要改顯示的，就在ajaxPager.js裡面改。
$.ajax({ 中url: 'pages.php'，處理就在pages.php中處理。那麼就來看看pages.php中的代碼：
<? ('connect.php'
= (['pageNum'
= ("select id from food" = ();
= 8;
= (/);
= * ['total'] = ['pageSize'] = ['totalPage'] = = ("select id,title,pic from food order by id asc limit ," (=( ['list'][] = 'id' => ['id'],
'title' => ['title'],
'pic' => ['pic'],
json_encode( ?>
上面當然還有數據庫連接了啦，這個應該很簡單吧，還是貼出來connect.php：
<? ('connect.php'
= (['pageNum'
= ("select id from food" = ();
= 8;
= (/);
= * ['total'] = ['pageSize'] = ['totalPage'] = = ("select id,title,pic from food order by id asc limit ," (=( ['list'][] = 'id' => ['id'],
'title' => ['title'],
'pic' => ['pic'],
json_encode( ?>
然後就完成了，具體思路很清晰，點擊頁數的時候jquery獲取rel中的頁面值，傳進去數據庫獲取相應數據展現在頁面上。
然後還有數據庫吧，我的表示這樣的：
1 CREATE TABLE IF NOT EXISTS `food` ( 2 `id` int(11) NOT NULL AUTO_INCREMENT, 3 `title` varchar(100) NOT NULL, 4 `pic` varchar(255) NOT NULL, 5 PRIMARY KEY (`id`) 6 ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=31 ;
我這邊有一個demo，然後大家可以下載看看。多多指教。
http://pan.baidu.com/share/link?shareid=1518322039&uk=67299903
