Rumah >pembangunan bahagian belakang >tutorial php >php---mysql+ajax 无序列表(ul li)分页实现
效果图(前台显示新闻列表)
注:以下的代码中的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教程有兴趣的朋友有所帮助。