表格数据js初始绑定
html调用js文件,js初始化时发送Ajax请求,获取页面数据将其写入在html页面上展示
html
<div class="card-body">
<!-- 表格实例代码 -->
<div style="height:38em">
<table id="listmap1" class="table table-hover">
<thead>
<tr>
<th class="checkRadioBox" style="width:30px;">
<!-- input 的ID必须为唯一的;ID必须与abel for="checkbox_all" for的值对应 -->
<input type="checkbox" id="checkbox_all" name="message" class="chk_1" />
<label for="checkbox_all"></label>
</th>
<th class="text-center" style="width:20%">批次号</th>
<th class="text-center" style="width:10%">申请人</th>
<th class="text-center" style="width:10%">状态</th>
<th class="text-center" style="width:10%">总数</th>
<th class="text-center" style="width:10%">推送成功</th>
<th class="text-center" style="width:10%">推送未完成</th>
<th class="text-center" style="width:20%">申请时间</th>
<th class="text-center" style="width:10%">操作</th>
</tr>
</thead>
<!--存放数据的地方-->
<tbody style="min-height: 500px;" id="tbody1">
</tbody>
</table>
</div>
<!-- 引入js文件,用来调用里面的初始化方法为表格赋初值 -->
<script type="text/javascript" src="${contextPath}/js/rwsqs/list1.js"></script>
</div>
js文件
<!--被引入时先初始化,初始化时发送Ajax获取想要的表格数据并调用addhtml1方法,将数据展示出来-->
$(function() {
$.ajax({
type : 'POST';
url : basepath + '/getInfo';
data : {
"page" : 1,
"rows" : 10
},
success : function(data){
addhtml1(data)
}
});
}
<!--在页面上展示数据-->
function addhtml1(data){
$("#tbody1").html("");
for(var i=0;i<data.rows.length;i++){
$("#tbody1").append("<tr>"
+"<td scope='checkRadioBox'><input type='checkbox' name='ch1' id='ch1-"+data.rows[i].batch+"' value='"+data.rows[i].batch+"' class='chk_1' />"
+"<label for='ch1-"+data.rows[i].batch+"'></label>"
+"</td>"
+"<td><a href='javascript:;'>"+data.rows[i].batch+"</a></td>"
+"<td class='text-center'>"+data.rows[i].apply_name+"</td>"
+"<td class='text-center'>"+data.rows[i].state+"</td>"
+"<td class='text-center'>"+data.rows[i].size+"</td>"
+"<td class='text-center'>"+data.rows[i].oksize+"</td>"
+"<td class='text-center'>"+data.rows[i].nosize+"</td>"
+"<td class='text-center'>"+data.rows[i].createTime+"</td>"
+"<td class='text-center'>"
+"</td>"
+"</tr>");
}
}
表格数据js初始绑定的更多相关文章
- 原生js实现数据的双向绑定
原生js实现数据的双向绑定 需要了解的属性是原色js的Object.definePrototype(obj,pop,descript); obj:被构造的对象 pop:被构造的对象的属性,创建对象或修 ...
- js如何实现动态显示表格数据(点奇数显示奇数单元格内容)
js如何实现动态显示表格数据(点奇数显示奇数单元格内容) 一.总结 一句话总结: 1.动态指定表格中每个单元格的id,然后通过id可以获取每个单元格,然后对里面的innerHTML进行赋值. 2.弄了 ...
- 通过原生js实现数据的双向绑定
通过js实现数据的双向绑定 : Object.defineProperty了解 语法: Object.defineProperty(obj, prop, descriptor) obj 要定义属性的对 ...
- 数据的双向绑定 Angular JS
接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 ...
- js导出表格数据
考虑到浏览器兼容性问题,采用原生js和后台交互下载网页数据 js: var table = $('.table-panel table'); // Header var tdData ="& ...
- 数据的双向绑定 Angular JS之开端篇
接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 ...
- AngularJS进阶(十一)AngularJS实现表格数据的编辑,更新和删除
AngularJS实现表格数据的编辑,更新和删除 效果 实现 首先,我们先建立一些数据,当然你可以从你任何地方读出你的数据 var app = angular.module('plunker', [' ...
- vue中如何实现数据的双向绑定
vue中如何实现数据的双向绑定 实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.name = this ...
- vue2.X props 数据传递 实现组件内数据与组件外的数据的双向绑定
vue2.0 禁止 子组件修改父组件数据 在Vue2中组件的props的数据流动改为了只能单向流动,即只能由组件外(调用组件方)通过组件的DOM属性attribute传递props给组件内,组件内只能 ...
随机推荐
- 看源码学编程系列之kafka(一)
kafka 由于它自身的高性能发送与消费能力,而受到广大企业的喜欢,所以我们就先看看kafka 一些源码实现如下: public void run() { int messageNo = 1; whi ...
- HashSet源码学习,基于HashMap实现
HashSet源码学习 一).Set集合的主要使用类 1). HashSet 基于对HashMap的封装 2). LinkedHashSet 基于对LinkedHashSet的封装 3). TreeS ...
- 无法优化的O(n!) 算法
旅行商问题: 有一位旅行商,他需要前往5个城市. 要前往这5个城市,同时要确保旅程最短. 对于每种顺序,他都计算总旅程,再挑选出旅程最短的路线.5个城市有120种不同的排列方式.因此,在涉及5个城市时 ...
- 理解Spark SQL(三)—— Spark SQL程序举例
上一篇说到,在Spark 2.x当中,实际上SQLContext和HiveContext是过时的,相反是采用SparkSession对象的sql函数来操作SQL语句的.使用这个函数执行SQL语句前需要 ...
- 迁移桌面程序到MS Store(12)——WPF使用UWP InkToolbar和InkCanvas
我们在<迁移桌面程序到MS Store(4)——桌面程序调用Win10 API>提到了对Win10 API的调用,但仍存在无法在WPF中使用UWP控件的问题,虽然都是XAML控件,但却是两 ...
- 2019-9-20:渗透测试,基础学习,phpstudy搭建Wordpress,Burpsuite抓取WorePress cms的post包
一.搭建WordPress的cms网站管理系统 1,下载Wordpress cms源码,下载地址:https://wordpress.org/download/ 2,将源码解压到phpstudy目录下 ...
- Redis系列(二):Redis高可用集群
一.集群模式 Redis集群是一个由多个主从节点组成的高可用集群,它具有复制.高可用和分片等特性 二.集群部署 1.环境 3台主机分别是: 192.168.160.146 192.168.160.15 ...
- socket解决编码解码问题
MySocket类: import socket class MySocket(socket.socket): # 继承自socket文件中的socket类,此时socket就是父类 def __in ...
- es6 filter方法应用
let arr =[ {title:'aaaa',read:100,hot:true}, {title:'bbbb',read:50,hot:false}, {title:'ccc',read:100 ...
- Fragment事务管理源码分析
转载请标明出处:http://blog.csdn.net/shensky711/article/details/53132952 本文出自: [HansChen的博客] 概述 在Fragment使用中 ...