Bootstrap+JS渲染数据表格⽐较常⽤的JS搭配Bootstrap⽣成⽣成表格～
1.定义⼀个表格
<引⼊css、js这些基本的就忽略了
<div class="container">
<div class="row">
<div class="col-md-12">
<table class="table table-hover " id="my_table">
<!-- 表头 -->
<thead>
<tr>
<th>送评单号</th>
<th>⽹名</th>
<th>真实姓名</th>
<th>项⽬数量</th>
<th>总费⽤</th>
<th>创建时间</th>
<th>操作</th>
</tr>
</thead>
<!-- tbody 表内容，使⽤js填充 -->
<tbody>
bootstrap项目</tbody>
</table>
</div>
</div>
</div>
2.编写JS
$(function(){
/**
*  发送ajax
*/
$.ajax({
url: "../yinin/list",
data:{"nummber":1996},
dataType: "json",
type:"post",
success: function (data){
de==500){
alert("没有信息")
return;
}
//填充表格
build_table(data);
},
error:function (XMLHttpRequest, textStatus, errorThrown) {
alert("请求失败！");
}
});
});//function end
//解析显⽰表格信息↑
function build_table(result){
//清空表格
$("#my_table tbody").empty();
//1).接收所有数据
var list=result.list;
/
/2).使⽤JS函数进⾏遍历,index：索引,item：对象
$.each(list,function(index,item){
//3).将每⼀条数据以 <tr>节点填充到表格中显⽰,
//  ⾸先得把每⼀个元素接收再append到⽗元素 <tr>中
var sendnum=$("<td style='color: #CD950C;'></td>").append(item.sendnum);
var nickname=$("<td style='color: #CD950C;'></td>").append(item.nickname);
var rname=$("<td style='color: #CD950C;'></td>").ame);
var coinCount=$("<td></td>").inCount+"个");
var sumfeetw=$("<td></td>").append("￥"+item.sumfeetw+"元");
var inupttime=$("<td></td>").append(getMyDate(item.inupttime));
var btn_edit=$("<button @click='update'></button>").addClass("btn btn-primary  btn-sm edit_btn index")//给修改按钮添加 Class标识,
.append($("<span><span>").addClass("glyphicon glyphicon-pencil")).append(" 修改");
//为编辑按钮添加⼀个⾃定义属性，设置值为表⽰当前员⼯ID ***
btn_edit.attr("edit-id",item.id);
//4).将两个按钮拼到⼀个<td>⾥↓
var btn=$("<td></td>").append(btn_edit);
//5).把所有的<td>m节点append到 <tr>中，最后把<tr>节点appendTo到指定的位置
$("<tr></tr>").append(sendnum).append(nickname).append(rname).append(coinCount).append(sumfeetw).append(inupttime).append(btn)    .appendTo("#scan_table tbody");
});
}
3.效果展⽰
具体实现效果根据业务去延伸！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。