码迷,mamicode.com
首页 > Web开发 > 详细

js分页

时间:2017-10-12 12:12:48      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:.com   html   body   es2017   error   ajax   show   点击   user   

别人偶尔问到的一个问题,练练手

点击获取数据集获得数据。。就完成啦。。

html页面:

<body>
<button onclick="test();">获取数据集</button>
<table id="roleTable"></table>
<div id="pageBar"></div>

<script src="js/jquery-3.2.1.js" type="text/javascript"></script>
<script type="text/javascript">
var roleList;
var pageSize=10;
function showPage(page){
var html="";
for(var i=(page-1)*10;i<page*10&&i<roleList.length;i++){
html+="<tr><td>"+roleList[i].id+"</td><td>"+roleList[i].name+"</td><td>"+roleList[i].desc+"</td></tr>"
}
$("#roleTable").html(html);
}
function test(){
$.ajax({
url:"user/roleList",
dataType:"json",
type:"POST",
success:function(data){
roleList=data.roleList
var pageNum=Math.ceil(roleList.length/pageSize);
var html="";
for(var i=1;i<=pageNum;i++){
html+=" <a href=‘javascript:void(0)‘ onclick=‘showPage("+i+");‘>"+i+"</a> "
}
if(pageNum>0){
$("#pageBar").html(html);
showPage(1);
}
},
error:function(a,b,c){
alert("爆炸");
}
});
}
</script>
</body>

效果:

技术分享

 

js分页

标签:.com   html   body   es2017   error   ajax   show   点击   user   

原文地址:http://www.cnblogs.com/yuezeyuan/p/7655311.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!