分页查询文件上传的主页面-阿里云开发者社区

分页查询文件上传的主页面

2023-03-28 36

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

本文涉及的产品

传统型负载均衡 CLB，每月750个小时 15LCU

应用型负载均衡 ALB，每月750个小时 15LCU

网络型负载均衡 NLB，每月750个小时 15LCU

简介： 分页查询文件上传的主页面，可参考

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>主页面</title><scriptsrc="http://www.jq22.com/jquery/jquery-1.10.2.js"></script></head><body><buttononclick="logout()">登出</button><header><h1>我是头部</h1></header><br><br><formaction="/fileUpload"enctype="multipart/form-data"method="post"><inputname="multipartFile"type="file"><inputtype="submit"value="文件上传"></form><br><br><div><buttononclick="page()">查询用户信息</button></div><tableid="pageTable"class="table table-striped"></table><divclass="pagination"><divstyle="float:left;"><label>显示
<selectid="pageSize"><option>5</option><option>10</option></select>条
</label></div><divstyle="float:right;"><buttonid="select">查询</button><buttonid="prePage">前一页</button><inputtype="text"id="pageNum"value="1"/><buttonid="nextPage">后一页</button>/
<labelid="pages"></label> |
<labelid="total"></label></div></div><br><br><br><tableid="loadBalance"class="table table-striped"></table><div><buttononclick="loadBalance()">查询负载均衡信息</button></div><br><br><br><tableid="serverGroup"class="table table-striped"></table><div><buttononclick="serverGroup()">查询服务器组信息</button></div><footerclass="footer"><h1>我是底部</h1></footer><script>functionloadBalance(){
$.ajax({
async: false,
type: "POST",
url: "http://localhost:8000/loadBalance",
data: {},
success: function (response) {
if (response.success==true) {
varresult=response.data;
varliststr='';
vartitlestr=`<caption>负载均衡信息</caption><thead><tr><th>名称</th><th>状态</th><th>IP</th><th>端口</th></tr></thead>`;
liststr=`<tr><td>${result.loadBalancerName}</td><td>${result.loadBalancerStatus}</td><td>${result.address}</td><td>${result.listenerPorts}</td></tr>`// result( item >= {//     liststr = `<tr><td>${item.name}</td><td>${item.status}</td><td>${item.ip}</td><td>${item.port}</td></tr>`// })varalllist=titlestr+liststr;
$("#loadBalance").html(alllist);
                } else {
alert("查询失败");
                }
            }
        })
    }
functionserverGroup(){
$.ajax({
async: false,
type: "POST",
url: "http://localhost:8000/serverGroup",
data: {},
success: function (response) {
if (response.success==true) {
varresult=response.data;
varliststr='';
vartitlestr=`<caption>服务器组信息</caption><thead><tr><th>ID</th><th>端口</th><th>协议</th></tr></thead>`;
result.forEach(item=> {
liststr=`<tr><td>${item.serverId}</td><td>${item.port}</td><td>${item.Description}</td></tr>`                    })
varalllist=titlestr+liststr;
$("#serverGroup").html(alllist);
                } else {
alert("查询失败");
                }
            }
        })
    }
functionpage(pageNum){
varpageSize=$("#pageSize").val();
$.ajax({
async: false,
type: "POST",
url: "http://localhost:8000/page",
data: {
pageNum: pageNum,
pageSize: pageSize            },
success:function (response){
if(response.success==true){
varres=response.data;
varliststr='';
varlist=response.data.records;
list.forEach( item=> {
liststr+=`<tr><td>${item.username}</td><td>${item.email}</td><td>${item.createtime}</td></tr>`;
                    })
$("#pageTable").html(liststr);
setPage(res);
                }else {alert("查询失败")}
            }
        })
    }
functionsetPage(res){
$("#total").text("总共"+res.total+"条记录");
$("#pages").text(res.pages);
$("#prePage").val(res.current-1);
$("#nextPage").val(res.current+1);
varpages=res.pages;
$("#prePage").val()==0?$("#prePage").attr("disabled",true):$("#prePage").attr("disabled",false);
$("#nextPage").val() >pages?$("#nextPage").attr("disabled",true):$("#nextPage").attr("disabled",false);
    }
$(".pagination button").click(function (e){
varpageNum=$(this).val();
page(pageNum);
    })
$("#pageNum").change(function (e){
page($("#pageNum").val());
    })
$("#pageSize").change(function (e){
page($("#pageNum").val());
    })
window.onload=page($("#pageNum").val());
functionlogout(){
$.ajax({
async: false,
type: "POST",
url: "http://localhost:8000/logout",
data: {},
success: function (response){
if(response.success==true){
location.href="./login.html";
                }else {alert("登出失败")};
            }
        })
    }
</script></body><style>.table-striped{
border: 1pxsolid#000;
border-collapse: collapse;
    }
tableth{
border: 1pxsolid#000;
border-collapse: collapse;
background: aliceblue;
    }
tabletd{
border: 1pxsolid#000;
border-collapse: collapse;
    }
</style></html>

分页查询文件上传的主页面

热门文章

最新文章

相关电子书

相关实验场景