标签:.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>
效果:
标签:.com html body es2017 error ajax show 点击 user
原文地址:http://www.cnblogs.com/yuezeyuan/p/7655311.html