jquery实现的分页显示功能示例
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了jquery实现的分页显示功能示例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3206字，纯文字阅读大概需要5分钟。
内容图文
本文实例讲述了jquery实现的分页显示功能。分享给大家供大家参考，具体如下：
我们在显示文章列表的时候，通常需要分页显示。
一种方式是通过SQL查询的limit进行分页，即只查询该页面的数据。
另外一种方式是查询出所有的数据，传递给前段，然后用jquery控制只显示我们想看到的分页。
html代码
<div class="am-g"> <div class="am-u-sm-12" 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 class="am-form" id="listContainer">' +
'<table class="am-table am-table-striped am-table-hover table-main" id="newsList">' +
'<thead>' +
'<tr>' +
'<th class="table-id">ID</th><th class="table-title">标题</th><th class="table-type">类别</th><th class="table-author am-hide-sm-only">作者</th><th class="table-date am-hide-sm-only">修改日期</th><th class="table-set">操作</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 class="am-hide-sm-only">'+data[i].author+'</td>' +
'<td class="am-hide-sm-only">'+data[i].time+'</td>' +
'<td>' +
'<div class="am-btn-toolbar"><div class="am-btn-group am-btn-group-xs">' +
'<a href="<{$urlParent}>/newsUpdate?id='+data[i].id+'>" rel="external nofollow" class="am-btn am-btn-default am-btn-xs am-text-secondary"><span class="am-icon-pencil-square-o"></span> 编辑</a> ' +
'<a href="<{$urlParent}>/newsDel?id='+data[i].id+'>" rel="external nofollow" class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only"><span class="am-icon-trash-o"></span> 删除</a> ' +
'</div></div>' +
'</td>' +
'</tr>';
}
content += '</tbody></table>' +
'<div class="am-cf">' +
'共 '+newsTotalNum+' 条记录 / '+pageNum+'页' +
'<div class="am-fr">' +
'<ul class="am-pagination" id="page">';
//判断前面是否还有页面
if(page == 1){
content += '<li class="am-disabled"><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 class="am-active"><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 class="am-disabled"><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扩展技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
内容总结
以上是互联网集市为您收集整理的jquery实现的分页显示功能示例全部内容，希望文章能够帮你解决jquery实现的分页显示功能示例所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。