表格数据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给组件内,组件内只能 ...
随机推荐
- 如何打造一款m3u8视频爬虫
0.前言 m3u8是一种很常见的网页视频播放器的视频源,比如说中国大学MOOC中课程就是使用了该种视频格式. 随便打开一门课程,就可以发现在网络请求中存在一个m3u8的文件,在preview中预览,它 ...
- 网站统计IP PV UV
###我只是一个搬运工 网站流量统计可以帮助我们分析网站的访问和广告来访等数据,里面包含很多数据的,比如访问使用的系统,浏览器,ip归属地,访问时间,搜索引擎来源,广告效果等. PV(访问量):Pag ...
- 从壹开始 [ Ids4实战 ] 之六 ║ 统一角色管理(上)
前言 书接上文,咱们在上周,通过一篇<思考> 性质的文章,和很多小伙伴简单的讨论了下,如何统一同步处理角色的问题,众说纷纭,这个我一会儿会在下文详细说到,而且我最终也定稿方案了.所以今天咱 ...
- PostGIS 爆管分析之根据爆点找出所有影响阀门
环境: Win10 ArcMap10.4(用于数据处理) postgresql9.4 postgis2.2.3 pgRouting2.3(postgresql插件) 说明: 做爆管分析的第一步,需要先 ...
- PowerDesigner从安装到同步数据库
前言 最近项目在如火如荼的进行着4.0版本的数据库设计工作,我们几个后端小伙伴也马不停蹄的进行着数据库的设计.使用的设计软件是PowerDesigner,这里记录一些常见的问题以备日后查看 安装 链接 ...
- vue computed计算属性 watch监听
计算属性 computed:{ 变量:function(){ return 计算好的值 } } 这时候计算好的值 就付给了你的变量 在实例中可以this.使用 注意 声明的变量的data中不可以重复声 ...
- python字符串、正则-xdd
1.分割字符串 str.split(sep,maxsplit) #(分隔符,分几次) 2.合并字符串 str2=string.join(iterable) #str2='@'.join(list1) ...
- css三大特效之优先级
1.什么是优先级作用:当多个选择器选中同一个标签,并且给同一个标签设置相同的属性时,如何层叠就由优先级来确定
- Java 类、接口的API
本章节收集的类/接口API有: Object类,枚举,包装类,接口Comparable,类Arrays,Thread类,System类,Math,BigInteger,Random,日期时间,异常 O ...
- at、crontab、anacron的基本使用
Linux的任务调度机制主要分为两种: 1. 执行一次:将在某个特定的时间执行的任务调度 at 2. 执行多次: crontab 3.关机后恢复尚未执行的程序 anacron. ①at at命令用于在 ...