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. bash6——循环

    for fruit in apple orange pear #写死 do each ${fruit}s done fruits="apple orange pear" #输入变量 ...

  2. .NET开发者的机遇与WebAssembly发展史(有彩蛋)

    一.唠唠WebAssembly的发展历程 目前有很多支持WebAssembly的项目,但发展最快的是Blazor,这是一个构建单页面的.NET技术,目前已经从Preview版本升级到了beta版本,微 ...

  3. 神奇的 SQL 之 MySQL 性能分析神器 → EXPLAIN,SQL 起飞的基石!

    前言 开心一刻 某人养了一头猪,烦了想放生,可是猪认识回家的路,放生几次它都自己回来了.一日,这个人想了个狠办法,开车带着猪转了好多路进山区放生,放生后又各种打转,然后掏出电话给家里人打了个电话,问道 ...

  4. ReadWriteLock: 读写锁

    ReadWriteLock: 读写锁 ReadWriteLock: JDK1.5提供的读写分离锁,采用读写锁分离可以有效帮助减少锁竞争. 特点: 1).使用读写锁.当线程只进行读操作时,可以允许多个线 ...

  5. 选择了uniapp开发app

    7月份打算做一简单app,之前公司做app的时候简单用过Dcloud公司的mui,当时由于uniapp刚出来,最终选择了mui.对uniapp的 了解几乎没有. 做app对我来说几乎是零基础的,当然是 ...

  6. Python-beautifulsoup库

    #beautifulsoup库的安装 pip install beautifulsoup4 python -m pip install --upgrage pip from bs4 import Be ...

  7. linux basic

    一:date 语法: 打印日期:date [OPTION].....  [+FORMAT] 设定日期:date [MMDDhhmm] [[cc][YY][.ss] 创建带实时日期的文件 touch $ ...

  8. Linux服务和systemctl详解

    定义 A Linux service is an application (or set of applications) that runs in the background waiting to ...

  9. Identityserver4中ResourceOwnerPassword 模式获取refreshtoken

    一.IS4服务端配置 1.配置Client new Client { ClientId = "xamarin", ClientSecrets = { ".Sha256() ...

  10. ERROR: Unrecognized command line argument: 'use'

    Unrecognized command line argument: 'use' gvm--GoLang语言多版本管理工具 基础环境 centos6.5 报错内容 gvm在命令行以外的任何地方调用 ...