表格数据js初始绑定
2024-09-01 19:57:18
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>");
}
}
最新文章
- sys/types.h fcntl.h unistd.h sys/stat.h
- ElasticSearch作为Windows服务启动
- [转]protobuf-2.5.0.tar.gz的下载与安装
- jquery插件开发(checkbox全选的简单实例)
- 未指定的错误,发生了一个 Oracle 错误，但无法从 Oracle 中检索错误信息。数据类型不被支持。
- 从ipad相机相册读取相片并保存
- 数学之路(3)-机器学习(3)-机器学习算法-SVM[9]
- start running 开始跑步减肥
- linux 添加定时任务脚本
- 使用CFile生成log文件的方法
- Python3基础 global关键字 使函数的局部变量升格为全局变量
- javascript的字符串判断方法
- Microsoft office2010页码设置----论文、课程设计报告格式
- 被动式Telnet研究及实现(解决内外网远程维护的困难)-part A
- 图片与base64的互转
- OO第一单元作业小结
- 优化之Source Qualifier组件
- 关于java使用POI导出ppt ，其中表格setText 失败问题
- C#4并行计算
- 微信小程序框架——wepy使后感