效果图（前台显示新闻列表）
注：以下的代码中的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=\""</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>"</a><div>"</span>+array[<span>'date'</span>]+<span>"</div></li>"</span>;
elseif(<span>1</span>==index &&<span>1</span>==curPage)li +=<span>"<li><a href=\""</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>"</a><div>"</span>+array[<span>'date'</span>]+<span>"</div></li>"</span>;
elseif(<span>2</span>==index &&<span>1</span>==curPage)li +=<span>"<li><a href=\""</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>"</a><div>"</span>+array[<span>'date'</span>]+<span>"</div></li>"</span>;
<span>else</span> li +=<span>"<li><a href=\""</span>+ array[<span>'content'</span>]+<span>"\"target=\"myIframe\" title=\""</span>+array[<span>'title'</span>]+<span>"\">"</span>+title_sub+<span>"</a><div>"</span>+array[<span>'date'</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>(curPage<<span>1</span>) 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></code><code>news_manager.php </code>
注意要包含进js文件。
<code>...
<divid=<span>"list"</span><span><span>class</span>="<span>list</span>">
<<span>ul</span>></<span>ul</span>>
</<span>div</span>>
<<span>divid</span>="<span>pagecount</span>"></<span>div</span>>
...</span></code>版权声明：本文为博主[原创]文章，未经博主允许可以转载，注明博客出处：[http://blog.csdn.net/FreeApe]
以上就介绍了php---mysql+ajax 无序列表（ul li）分页实现，包括了方面的内容，希望对PHP教程有兴趣的朋友有所帮助。
PHP怎么学习？PHP怎么入门？PHP在哪学？PHP怎么学才快？不用担心，这里为大家提供了PHP速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
619
收藏
