使用jquery怎么实现一个分页显示功能

今天就跟大家聊聊有关使用jquery怎么实现一个分页显示功能，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

html代码

<divclass="am-g">
<divclass="am-u-sm-12"id="listTag">
</div>
</div>

js代码

$(function(){
showPage(1);
});
functionshowPage(page){
$.ajax({
type:"GET",
url:"<{$urlParent}>/newsManageList?cid=all",
dataType:"json",
success:function(data){
varnewsTotalNum=data.length;//新闻记录的总条数
varpageNum=Math.ceil(newsTotalNum/<{$newsPageNum}>);//分页的总页数
varcontent='<formclass="am-form"id="listContainer">'+
'<tableclass="am-tableam-table-stripedam-table-hovertable-main"id="newsList">'+
'<thead>'+
'<tr>'+
'<thclass="table-id">ID</th><thclass="table-title">标题</th><thclass="table-type">类别</th><thclass="table-authoram-hide-sm-only">作者</th><thclass="table-dateam-hide-sm-only">修改日期</th><thclass="table-set">操作</th>'+
'</tr>'+
'</thead>'+
'<tbody>';
for(vari=((page-1)*<{$newsPageNum}>);i<(page*<{$newsPageNum}>)&&i<newsTotalNum;i++){
content+='<tr>'+
'<td>'+(i+1)+'</td>'+
'<td><ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">'+data[i].title+'</a></td>'+
'<td>'+data[i].name+'</td>'+
'<tdclass="am-hide-sm-only">'+data[i].author+'</td>'+
'<tdclass="am-hide-sm-only">'+data[i].time+'</td>'+
'<td>'+
'<divclass="am-btn-toolbar"><divclass="am-btn-groupam-btn-group-xs">'+
'<ahref="<{$urlParent}>/newsUpdate?id='+data[i].id+'>"rel="externalnofollow"class="am-btnam-btn-defaultam-btn-xsam-text-secondary"><spanclass="am-icon-pencil-square-o"></span>编辑</a>'+
'<ahref="<{$urlParent}>/newsDel?id='+data[i].id+'>"rel="externalnofollow"class="am-btnam-btn-defaultam-btn-xsam-text-dangeram-hide-sm-only"><spanclass="am-icon-trash-o"></span>删除</a>'+
'</div></div>'+
'</td>'+
'</tr>';
}
content+='</tbody></table>'+
'<divclass="am-cf">'+
'共'+newsTotalNum+'条记录/'+pageNum+'页'+
'<divclass="am-fr">'+
'<ulclass="am-pagination"id="page">';
//判断前面是否还有页面
if(page==1){
content+='<liclass="am-disabled"><ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">&laquo;</a></li>';
}else{
content+='<li><ahref="javascript:showPage('+(page-1)+')"rel="externalnofollow">&laquo;</a></li>';
}
for(vari=1;i<=pageNum;i++){
if(i==page){
content+='<liclass="am-active"><ahref="javascript:showPage('+i+')"rel="externalnofollow"rel="externalnofollow">'+i+'</a></li>';
}else{
content+='<li><ahref="javascript:showPage('+i+')"rel="externalnofollow"rel="externalnofollow">'+i+'</a></li>';
}
}
//判断后面是否还有页面
if(page==pageNum){
content+='<liclass="am-disabled"><ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">&raquo;</a></li>';
}else{
content+='<li><ahref="javascript:showPage('+(page+1)+')"rel="externalnofollow">&raquo;</a></li>';
}
content+='</ul>'+
'</div>'+
'</div><hr>'+
'</form>';
$("#listTag").empty();
$("#listTag").append(content);
}
});
}

看完上述内容，你们对使用jquery怎么实现一个分页显示功能有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注恰卡编程网行业资讯频道，感谢大家的支持。