本文实例讲述了jquery实现的分页显示功能。分享给大家供大家参考，具体如下：
我们在显示文章列表的时候，通常需要分页显示。
一种方式是通过SQL查询的limit进行分页，即只查询该页面的数据。
另外一种方式是查询出所有的数据，传递给前段，然后用jquery控制只显示我们想看到的分页。
html代码
div div id="listTag" /div /div
js代码
$(function(){
showPage(1);
function showPage(page){
$.ajax({
type:"GET",
url:" {$urlParent} /newsManageList cid=all",
dataType:"json",
success:function(data){
var newsTotalNum = data.length; //新闻记录的总条数
var pageNum = Math.ceil(newsTotalNum/ {$newsPageNum} //分页的总页数
var content = ' form id="listContainer" ' +
' table id="newsList" ' +
' thead ' +
' tr ' +
' th ID /th th 标题 /th th 类别 /th th 作者 /th th 修改日期 /th th 操作 /th ' +
' /tr ' +
' /thead ' +
' tbody
for(var i=((page-1)* {$newsPageNum} i (page* {$newsPageNum} ) i newsTotalNum;i++){
content += ' tr ' +
' td '+(i+1)+' /td ' +
' td a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" '+data[i].title+' /a /td '+
' td '+data[i].name+' /td ' +
' td '+data[i].author+' /td ' +
' td '+data[i].time+' /td ' +
' td ' +
' div div ' +
' a href=" {$urlParent} /newsUpdate id='+data[i].id+' " rel="external nofollow" span /span 编辑 /a ' +
' a href=" {$urlParent} /newsDel id='+data[i].id+' " rel="external nofollow" span /span 删除 /a ' +
' /div /div ' +
' /td ' +
' /tr
content += ' /tbody /table ' +
' div ' +
'共 '+newsTotalNum+' 条记录 / '+pageNum+'页' +
' div ' +
' ul id="page"
//判断前面是否还有页面
if(page == 1){
content += ' li a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" /a /li
}else{
content += ' li a href="javascript:showPage('+(page-1)+')" rel="external nofollow" /a /li
for(var i=1;i =pageNum;i++){
if(i == page){
content += ' li a href="javascript:showPage('+i+')" rel="external nofollow" rel="external nofollow" '+i+' /a /li
}else{
content += ' li a href="javascript:showPage('+i+')" rel="external nofollow" rel="external nofollow" '+i+' /a /li
//判断后面是否还有页面
if(page == pageNum){
content += ' li a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" /a /li
}else{
content += ' li a href="javascript:showPage('+(page+1)+')" rel="external nofollow" /a /li
content += ' /ul ' +
' /div ' +
' /div hr ' +
' /form
$("#listTag").empty();
$("#listTag").append(content);
显示效果：
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》及《》
希望本文所述对大家jQuery程序设计有所帮助。