分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

js分页

发布时间:2023-09-06 01:17责任编辑:林大明关键词:js

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

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

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分页

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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved