我们在显示文章列表的时候，通常需要分页显示。
一种方式是通过SQL查询的limit进行分页，即只查询该页面的数据。
另外一种方式是查询出所有的数据，传递给前段，然后用jquery控制只显示我们想看到的分页。
html代码
<div> <div> </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>' + '<table>' + '<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="#" >'+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+'>"><span></span> 编辑</a> ' + '<a href="<{$urlParent}>/newsDel?id='+data[i].id+'>"><span></span> 删除</a> ' + '</div></div>' + '</td>' + '</tr>'; } content += '</tbody></table>' + '<div>' + '共 '+newsTotalNum+' 条记录 / '+pageNum+'页' + '<div>' + '<ul>'; //判断前面是否还有页面 if(page == 1){ content += '<li><a href="#" >«</a></li>'; }else{ content += '<li><a href="javascript:showPage('+(page-1)+')" >«</a></li>'; } for(var i=1;i<=pageNum;i++){ if(i == page){ content += '<li><a href="javascript:showPage('+i+')" >'+i+'</a></li>'; }else{ content += '<li><a href="javascript:showPage('+i+')" >'+i+'</a></li>'; } } //判断后面是否还有页面 if(page == pageNum){ content += '<li><a href="#" >»</a></li>'; }else{ content += '<li><a href="javascript:showPage('+(page+1)+')" >»</a></li>'; } content += '</ul>' + '</div>' + '</div><hr>' + '</form>'; $("#listTag").empty(); $("#listTag").append(content); } }); }
显示效果：
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》