java中根据后端返回的数据加载table列表
<%//引入 js
@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<title>用户列表</title>
<script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="./js/vue.js"></script> </head>
<body >
<table border="1" cellspacing="1" cellpadding="1" id="tab" >
<tr v-for="cl in classs">
<th>{{cl.id}}</th>
<th>{{cl.tenant_id}}</th>
<th>{{cl.code}}</th>
<th>{{cl.account}}</th>
<th>{{cl.password}}</th>
<th>{{cl.real_name}}</th>
<th>{{cl.avatar}}</th>
<th>{{cl.email}}</th>
<th>{{cl.phone}}</th>
<th>{{cl.sex}}</th>
<th>{{cl.role_id}}</th>
<th>{{cl.dept_id}}</th>
<th>{{cl.create_user}}</th>
<th>{{cl.create_time}}</th> </tr>
<tr v-for="(item,index) in info">
<th>{{item.id}}</th>
<th>{{item.tenant_id}}</th>
<th>{{item.code}}</th>
<th>{{item.account}}</th>
<th>{{item.password}}</th>
<th>{{item.real_name}}</th>
<th>{{item.avatar}}</th>
<th>{{item.email}}</th>
<th>{{item.phone}}</th>
<th>{{item.sex}}</th>
<th>{{item.role_id}}</th>
<th>{{item.dept_id}}</th>
<th>{{item.create_user}}</th>
<th>{{item.create_time}}</th>
<td><button type="button" @click="del(index)">删除</button></td>
</tr>
</table>
<script type="text/javascript"> new Vue({
el:'#tab',
data:{
classs:[
{id:'用户id',tenant_id:'租户id',code:'用户编号',account:'账号',password:'密码',name:'昵称',real_name:'真名',avatar:'头像',email:'邮箱',phone:'手机',birthday:'生日',sex:'性别',role_id:'角色id',dept_id:'部门id',create_user:'创建人',create_dept:'创建部门',create_time:'创建时间',update_user:'修改人'}
],
msg:{id:'ID',name:'名字',inf:'描述',behavior:'操作'},
info:[
{id:'1',name:'a',inf:'amorous'},
{id:'2',name:'b',inf:'beautiful'},
{id:'3',name:'c',inf:'clever'},
{id:'4',name:'d',inf:'delicious'},
]
},
created(){
this.getList();
},
methods:{
getList:function(index){
$.ajax({
type:"get",
url:"${pageContext.request.contextPath }/getUserInfo.do",
//data:{"id":id},
success:data=>{
console.log(this)
this.info=data.data;
} })
},
del:function(index){
alert("删除")
}
}
})
</script> </body> </html>
2.方法二
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<title>用户列表</title>
<script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script> <style>
table {
width: 600px;
padding: 0 ;
margin: 100 auto;
border-collapse: collapse;
}
td,th {
border: 1px solid #ddd;
padding: 6px 6px 6px 12px;
color: #4f6b72;
text-align: center;
}
th {
background: #d3d3d3; }
</style>
</head>
<body onload="appendTable(jsonArray);">
<div id="div1">
<table id="table">
</table> </div>
<script type="text/javascript">
$(document).ready(function(){ }); var jsonArray = [{"主键":"","租户ID":"小苹果","账号":"现代神曲，大妈的最爱","密码":"小00","昵称":"小00","真名":"小00","头像":"小00","邮箱":"小00","手机":"小00","生日":"小00","性别":"小00","角色id":"小00","部门id":"小00",}];
var headArray = [];
function parseHead(oneRow) {
for ( var i in oneRow) {
headArray[headArray.length] = i;
}
}
function appendTable() { $.ajax({
type:"get",
url:"${pageContext.request.contextPath }/getUserInfo.do",
//data:{"id":id},
success:function(data) {
var datas=Array.from(data.data);
//alert(datas);
parseHead(data.data[0]);
var div = document.getElementById("div1");
//var table = document.createElement("table");
var table = document.getElementById("table");
var thead = document.createElement("tr");
for ( var count = 0; count < headArray.length; count++) {
var td = document.createElement("th");
td.innerHTML = headArray[count];
thead.appendChild(td);
}
table.appendChild(thead);
for ( var tableRowNo = 0; tableRowNo < data.data.length; tableRowNo++) {
var tr = document.createElement("tr");
for ( var headCount = 0; headCount < headArray.length; headCount++) {
var cell = document.createElement("td");
cell.innerHTML = data.data[tableRowNo][headArray[headCount]];
tr.appendChild(cell);
}
table.appendChild(tr);
}
div.appendChild(table); }
});
} </script>
</body> </html>
java中根据后端返回的数据加载table列表的更多相关文章
- arcgis python 使用光标和内存中的要素类将数据加载到要素集 学习:http://zhihu.esrichina.com.cn/article/634
学习:http://zhihu.esrichina.com.cn/article/634使用光标和内存中的要素类将数据加载到要素集 import arcpy arcpy.env.overwriteOu ...
- easyui中加载table列表数据 第一次有数据第二次没有数据问题
$('#allUsingProductTable').datagrid({ 加载数据时,第二加载时table会发生变化会出现找不到问题.如果是弹框没有影响,弹框出现出现列表每次都会执行销毁方法. 解 ...
- 浅谈Entity Framework中的数据加载方式
如果你还没有接触过或者根本不了解什么是Entity Framework,那么请看这里http://www.entityframeworktutorial.net/EntityFramework-Arc ...
- hibernate框架学习第六天：QBC、分页查询、投影、数据加载策略、二级缓存
QBC查询 1.简单查询 Criteria c = s.createCriteria(TeacherModel.class); 2.获取查询结果 多条:list 单挑:uniqueResult 3.分 ...
- AＥ数据加载
1. 数据加载问题: 任何系统都离不开数据的加载,下边就AE中几种常用的数据加载做一个列举.以便查阅: 1.加载个人数据库 个人数据库是保存在Access中的数据库.其加载方式有两种:通过名字和通过属 ...
- React Native ：加载新闻列表
代码地址如下:http://www.demodashi.com/demo/13212.html 标签与内容页联动 上一节(React Native : 自定义视图)做到了点击标签自动移动,还差跟下面的 ...
- 解决网页中Waiting (TTFB)数据加载过慢的问题
解决网页中Waiting (TTFB)数据加载过慢的问题 最近做了一个网页,在本地测试良好,数据可以得到很快的反馈,但是当部署到云端Linux上时候,就会出现加载缓慢的问题.本地测试,得到数据大概3s ...
- JQuery插件：遮罩+数据加载中。。。（特点：遮你想遮，罩你想罩）
在很多项目中都会涉及到数据加载.数据加载有时可能会是2-3秒,为了给一个友好的提示,一般都会给一个[数据加载中...]的提示.今天就做了一个这样的提示框. 先去jQuery官网看看怎么写jQuery插 ...
- iOS App中数据加载的6种方式
我们看到的APP,往往有着华丽的启动界面,然后就是漫长的数据加载等待,甚至在无网络的时候,整个处于不可用状态.那么我们怎么处理好界面交互中的加载设计,保证体验无缝衔接,保证用户没有漫长的等待感,而可以 ...
随机推荐
- 腾讯云 CHDFS — 云端大数据存算分离的基石
随着网络性能提升,云端计算架构逐步向存算分离转变,AWS Aurora 率先在数据库领域实现了这个转变,大数据计算领域也迅速朝此方向演化. 存算分离在云端有明显优势,不但可以充分发挥弹性计算的灵活,同 ...
- Java String 演进全解析
前言 String 是我们使用最频繁的对象,使用不当会对内存.程序的性能造成影响,本篇文章全面介绍一下 Java 的 String 是如何演进的,以及使用 String 的注意事项. 下面的输出结果是 ...
- 冲刺随笔——Day_Eight
这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 这个作业要求在哪里 团队作业第五次--Alpha冲刺 这个作业的目标 团队进行Alpha冲刺 作业正文 正文 其他参考文献 无 ...
- JZOJ2020年8月11日提高组反思
JZOJ2020年8月11日提高组反思 T1 看到题 啊这?! 我看错了吗??? 我理解错题了吗?? 好吧没有-- 高精度模板题,不用多说 T2 看到这种矩阵的问题 以为是前缀和搞事情 结果呢 扫描线 ...
- 不是程序员，代码也不能太丑！python官方书写规范：任何人都该了解的 pep8
不是程序员,代码也不能太丑!python官方书写规范:任何人都该了解的 pep8 简介:为什么要强调 书写规范 ?这其实并不关乎"美丑",而是为了 更高的效率(代码阅读.开发.维护 ...
- RocketMq(三)：server端处理框架及消费数据查找实现
rocketmq作为一个高性能的消息中间件,咱们光停留在使用层面,总感觉缺点什么.虽然rocketmq的官方设计文档讲得还是比较详细的,但纸上得来终觉浅!今天我们就来亲自挖一挖rocketmq的实现细 ...
- CentOS下Mysql的操作
重启Mysql的各种方法 1.通过rpm包安装的MySQL service mysqld restart /etc/inint.d/mysqld start 2.从源码包安装的MySQL // lin ...
- 第8.18节 Python类中内置析构方法__del__
一. 引言 基本上所有支持OOP设计的语言都支持析构方法(也称析构函数),析构方法都是在对象生命周期结束时调用,一般用来实施实例相关生命周期内访问数据的扫尾工作,包括关闭文件.释放内存.输出日志.清理 ...
- PyQt（Python+Qt）学习随笔：QTreeWidget中获取可见项视口位置矩形的visualItemRect方法
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 树型部件的visualItemRect方法可以返回参数指定项在视口的位置矩形. QRect visu ...
- 小程序image无法显示图片
图片路径中有中文 图片地址为http开头,图片只能在调试模式中显示,真机也必须开调试. 图片名称有空格 图片的后缀必须为小写的.png或者.jpg