效果圖（前台顯示新聞列表）
註：以下的程式碼中的css實作沒有包含，可以自己去實作。透過ajax的回呼函數success等，取得資料庫中的數據，然後再透過js將資料輸出到php中，從而動態顯示數據。以作備忘。
程式碼實作
<code>pages.js </code>
<code><span>var</span> curPage =<span>1</span>;<span>//当前页码</span><span>var</span> total,pageSize,totalPage;
<span>//获取数据</span><span><span>function</span><span>getData</span><span>(page)</span>{</span>
$.ajax({
type:<span>'POST'</span>,
url:<span>'page.php'</span>,
data:{<span>'pageNum'</span>:page-<span>1</span>},
dataType:<span>'json'</span>,
beforeSend:<span><span>function</span><span>()</span>{</span>
$(<span>"#list ul"</span>).append(<span>"<li>loading...</li>"</span>);
},
success:<span><span>function</span><span>(json)</span>{</span>
$(<span>"#list ul"</span>).empty();
total = json.total;<span>//总记录数</span>
pageSize = json.pageSize;<span>//每页显示条数</span>
curPage = page;<span>//当前页</span>
totalPage = json.totalPage;<span>//总页数</span><span>var</span> li =<span>""</span>;
<span>var</span> list = json.list;
$.each(list,<span><span>function</span><span>(index,array)</span>{</span><span>//遍历json数据列</span><span>if</span>(array[<span>'title'</span>].length ><span>28</span>){
<span>var</span> title_sub = array[<span>'title'</span>].substring(<span>0</span>,<span>20</span>);<span>// 获取子字符串。</span>
}
elsevar title_sub = array[<span>'title'</span>];
<span>if</span>(<span>0</span>==index &&<span>1</span>==curPage)li +=<span>"<li>
<a href="%5C%22%22</span">+ array[<span>'content'</span>]+<span>"\"style=\"color:red;font-weight:900;\"target=\"myIframe\" title=\""</span>+array[<span>'title'</span>]+<span>"\">"</span>+title_sub+<span>"</span></a><div>"+array[<span>'date'</span>]+<span>"</span>
</div>
</li>"</span>;
elseif(<span>1</span>==index &&<span>1</span>==curPage)li +=<span>"<li>
<a href="%5C%22%22</span">+ array[<span>'content'</span>]+<span>"\"style=\"color:Darkorange;font-weight:700;\"target=\"myIframe\" title=\""</span>+array[<span>'title'</span>]+<span>"\">"</span>+title_sub+<span>"</span></a><div>"+array[<span>'date'</span>]+<span>"</span>
</div>
</li>"</span>;
elseif(<span>2</span>==index &&<span>1</span>==curPage)li +=<span>"<li>
<a href="%5C%22%22</span">+ array[<span>'content'</span>]+<span>"\"style=\"color:Greenyellow;font-weight:500;;\"target=\"myIframe\" title=\""</span>+array[<span>'title'</span>]+<span>"\">"</span>+title_sub+<span>"</span></a><div>"+array[<span>'date'</span>]+<span>"</span>
</div>
</li>"</span>;
<span>else</span> li +=<span>"<li>
<a href="%5C%22%22</span">+ array[<span>'content'</span>]+<span>"\"target=\"myIframe\" title=\""</span>+array[<span>'title'</span>]+<span>"\">"</span>+title_sub+<span>"</span></a><div>"+array[<span>'date'</span>]+<span>"</span>
</div>
</li>"</span>;
});
$(<span>"#list ul"</span>).append(li);
},
complete:<span><span>function</span><span>()</span>{</span><span>//生成分页条</span>
getPageBar();
},
error:<span><span>function</span><span>()</span>{</span>
alert(<span>"数据加载失败"</span>);
}
});
}
<span>//获取分页条</span><span><span>function</span><span>getPageBar</span><span>()</span>{</span><span>//页码大于最大页数</span><span>if</span>(curPage>totalPage) curPage=totalPage;
<span>//页码小于1</span><span>if</span>(curPage1) curPage=<span>1</span>;
pageStr =<span>"<span>共"</span>+total+<span>"条</span><span>"</span>+curPage+<span>"/"</span>+totalPage+<span>"</span>"</span>;
<span>//如果是第一页</span><span>if</span>(curPage==<span>1</span>){
pageStr +=<span>"<span>首页</span> <span>上一页</span> "</span>;
}<span>else</span>{
pageStr +=<span>"<span><a rel="1">首页</a> </span><span><a rel='"</span>+(curPage-<span>1</span>)+<span>"'>上一页</a> </span>"</span>;
}
<span>//如果是最后页</span><span>if</span>(curPage>=totalPage){
pageStr +=<span>"<span>下一页</span> <span>尾页</span> "</span>;
}<span>else</span>{
pageStr +=<span>"<span><a rel='"</span>+(<span>parseInt</span>(curPage)+<span>1</span>)+<span>"'>下一页</a> </span><span><a rel='"</span>+totalPage+<span>"'>尾页</a> </span>"</span>;
}
$(<span>"#pagecount"</span>).html(pageStr);
}
$(<span><span>function</span><span>()</span>{</span>
getData(<span>1</span>);
$(<span>"#pagecount span a"</span>).live(<span>'click'</span>,<span><span>function</span><span>()</span>{</span><span>var</span> rel = $(<span>this</span>).attr(<span>"rel"</span>);
<span>if</span>(rel){
getData(rel);
}
});
});</code><code>page.php </code>
<code><span><?php </span><span>/*数据库连接文件，这个只需连接即可*/</span><span>include_once</span>(<span>'../connect/connect.php'</span>);
<span>$page</span>=intval(<span>$_POST</span>[<span>'pageNum'</span>]);
<span>$result</span>=mysql_query(<span>"select id from news"</span>);
<span>$total</span>=mysql_num_rows(<span>$result</span>);<span>//总记录数</span><span>$pageSize</span>=<span>6</span>;<span>//每页显示数</span><span>$totalPage</span>=ceil(<span>$total</span>/<span>$pageSize</span>);<span>//总页数</span><span>$startPage</span>=<span>$page</span>*<span>$pageSize</span>;
<span>$arr</span>[<span>'total'</span>]=<span>$total</span>;
<span>$arr</span>[<span>'pageSize'</span>]=<span>$pageSize</span>;
<span>$arr</span>[<span>'totalPage'</span>]=<span>$totalPage</span>;
<span>$query</span>=mysql_query(<span>"select id,title,content,date from news order by id desc limit $startPage,$pageSize"</span>);
<span>while</span>(<span>$row</span>=mysql_fetch_array(<span>$query</span>)){
<span>$arr</span>[<span>'list'</span>][]=<span>array</span>(
<span>'id'</span>=><span>$row</span>[<span>'id'</span>],
<span>'title'</span>=><span>$row</span>[<span>'title'</span>],
<span>'content'</span>=><span>$row</span>[<span>'content'</span>],
<span>'date'</span>=>date(<span>"Y-m-d"</span>,<span>$row</span>[<span>'date'</span>])
);
}
echojson_encode(<span>$arr</span>);
<span>?></span></span></code><code>news_manager.php </code>
注意要包含進js檔案。
<code>...
<divid>"list"<span><span>class</span>="<span>list</span>">
ul</span>><span>ul</span>>
<span>div</span>>
divid="<span>pagecount</span>"><span>div</span>>
...</divid></code>版權聲明：本文為部落客[原文]文章，未經部落客允許可以轉載，註明部落格出處：[http://blog.csdn.net/FreeApe]
以上就介紹了php---mysql+ajax 無序列表（ul li）分頁實現，包括了方面的內容，希望對PHP教程有興趣的朋友有所幫助。
