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,往往有着华丽的启动界面,然后就是漫长的数据加载等待,甚至在无网络的时候,整个处于不可用状态.那么我们怎么处理好界面交互中的加载设计,保证体验无缝衔接,保证用户没有漫长的等待感,而可以 ...
随机推荐
- houdini 鱼眼相机
http://mattebb.com/weblog/houdini-fisheye-camera/ 这个网站是有提供一个相机shader的,,如图是方形的,国内的用户,比较多是做球幕的小伙伴,圆形就行 ...
- Spring源码解析之BeanFactoryPostProcessor（二）
上一章,我们介绍了在AnnotationConfigApplicationContext初始化的时候,会创建AnnotatedBeanDefinitionReader和ClassPathBeanDef ...
- SSM之Spring框架--->>墨盒案例
分析: 程序中包括打印机(Printer).墨盒(Ink).和纸张(Paper).三类组件 首先创建一个新项目文件Spring_Box 我们来定义墨盒和纸张的接口类 墨盒接口Ink.java文件内容如 ...
- WindowsServer系统设置U盘引导及安装
准备一台服务器,我的服务器上图. 1.开机启动,按DEL进入BIOS.我的显示如下图,按F7进入. 2.找到设置启动项的地方 3.修改U盘启动项 4.保存退出. 5.重启服务器正常的话应该能够从U盘引 ...
- 熊海CMS xhcms v1.0代码审计
有空的时候就进行小型CMS的代码审计,这次审计的对象是熊海CMS v1.0 本地环境安装好了之后,可以看到提示安装了锁文件 说明重装漏洞应该不会存在了,这时候丢进seay代码审计系统的代码也出结果了, ...
- dataframe 检查缺失值
s = df.isnull().any() #返回series形式,可以用enumerate打印s #true代表有空值 null_index = [] for i,j in enumerate(s) ...
- Jenkins 如何实现 拷贝文件到网络共享目录
在使用jenkins中,发现拷贝文件时,不能在脚本中直接添加脚本实现. 我实现的一种方法,希望能对您有用. net use y: \\server_name\workspace "passw ...
- 【题解】AcWing 389. 直径
原题链接 题目描述 共两个问题,第一问求树的直径长度,第二问求直径的必须边 思路 第一问很好求,lyd书里有,就不再赘述. 这里建议使用两次bfs的方法,因为关系到第二问的路径,这么做比较方便. 然后 ...
- 【Codeforces 1037H】Security（SAM & 线段树合并）
Description 给出一个字符串 \(S\). 给出 \(Q\) 个操作,给出 \(L, R, T\),求字典序最小的 \(S_1\),使得 \(S^\prime\) 为\(S[L..R]\) ...
- Springboot — 用更优雅的方式发HTTP请求:RestTemplate
RestTemplate是Spring提供的用于访问Rest服务的客户端,RestTemplate提供了多种便捷访问远程Http服务的方法,能够大大提高客户端的编写效率. 我之前的HTTP开发是用ap ...