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初始绑定的更多相关文章

  1. 原生js实现数据的双向绑定

    原生js实现数据的双向绑定 需要了解的属性是原色js的Object.definePrototype(obj,pop,descript); obj:被构造的对象 pop:被构造的对象的属性,创建对象或修 ...

  2. js如何实现动态显示表格数据(点奇数显示奇数单元格内容)

    js如何实现动态显示表格数据(点奇数显示奇数单元格内容) 一.总结 一句话总结: 1.动态指定表格中每个单元格的id,然后通过id可以获取每个单元格,然后对里面的innerHTML进行赋值. 2.弄了 ...

  3. 通过原生js实现数据的双向绑定

    通过js实现数据的双向绑定 : Object.defineProperty了解 语法: Object.defineProperty(obj, prop, descriptor) obj 要定义属性的对 ...

  4. 数据的双向绑定 Angular JS

    接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 ...

  5. js导出表格数据

    考虑到浏览器兼容性问题,采用原生js和后台交互下载网页数据 js: var table = $('.table-panel table'); // Header var tdData ="& ...

  6. 数据的双向绑定 Angular JS之开端篇

    接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 ...

  7. AngularJS进阶(十一)AngularJS实现表格数据的编辑,更新和删除

    AngularJS实现表格数据的编辑,更新和删除 效果 实现 首先,我们先建立一些数据,当然你可以从你任何地方读出你的数据 var app = angular.module('plunker', [' ...

  8. vue中如何实现数据的双向绑定

    vue中如何实现数据的双向绑定 实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.name = this ...

  9. vue2.X props 数据传递 实现组件内数据与组件外的数据的双向绑定

    vue2.0 禁止 子组件修改父组件数据 在Vue2中组件的props的数据流动改为了只能单向流动,即只能由组件外(调用组件方)通过组件的DOM属性attribute传递props给组件内,组件内只能 ...

随机推荐

  1. Hadoop MapReduce常用输入输出格式

    这里介绍MapReduce常用的几种输入输出格式. 三种常用的输入格式:TextInputFormat , SequenceFileInputFormat , KeyValueInputFormat ...

  2. Lombok 使用详解,简化Java编程

    前言 在 Java 应用程序中存在许多重复相似的.生成之后几乎不对其做更改的代码,但是我们还不得不花费很多精力编写它们来满足 Java 的编译需求 比如,在 Java 应用程序开发中,我们几乎要为所有 ...

  3. Install python3

    wget https://www.python.org/ftp/python/3.7.4/Python-3.7.4.tgz tar xf Python-3.7.4.tgz cd Python-3.7. ...

  4. python 正确字符串处理(自己踩过的坑)

    不管是谁,只要处理过由用户提交的调查数据,就能明白这种乱七八糟的数据是怎么一回事.为了得到一组能用于分析工作的格式统一的字符串,需要做很多事情:去除空白符.删除各种标点符号.正确的大写格式等.做法之一 ...

  5. day 23 复习

    本来应该学习day23,由于上午未学习,下去困,导致今天未进行进度 那就做一下简单的复习吧! 1. while else结构,如果while 后的条件条件不再满足 引发循环再继续,则执行else中的内 ...

  6. css控制ul标签下的指定li标签样式

    ul li:first-child{ }  第一个ul li:last-child{ }   最后一个ul li:nth-child(4){ } 指定第几个,4就是代表第四个ul li:nth-chi ...

  7. 二叉查找树的平衡(DSW算法)

    树适合于表示某些领域的层次结构(比如Linux的文件目录结构),使用树进行查找比使用链表快的多,理想情况下树的查找复杂度O(log(N)),而链表为O(N),但理想情况指的是什么情况呢?一般指树是完全 ...

  8. Java NIO 三大组件之 Buffer

    NIO大三组件 之Buffer 一.什么是Buffer Buffer是用于特定原始类型的数据的容器. 它的实质就是一组数组,用于存储不同类型的数据. 二.缓冲区的类型 缓冲区类型除了Boolean值类 ...

  9. JSONPath小试牛刀之Snack3

    最近在网上看了些JSONPath的入门例子.打算用Snack3这个框架写写例子.json path对`JSON的处理绝对是神器. 1.准备JSON字符串 { "store": { ...

  10. 【Android - 自定义View】之View的draw过程解析

    draw(绘制)过程的作用是将View绘制到屏幕上面.View中有 draw() 方法和 onDraw() 方法,但onDraw()方法是空方法:ViewGroup中没有draw()方法,也没有onD ...