首先: 定义一个表头(改表头的作用是,固定表头的展示,不至于tabody数据过多时,页面滚动导致表格头部滚动)
<table id="dev-title" class="table table-hover" style="margin-bottom: 0; table-layout:fixed;">
<colgroup>
<col style="width:10%"/>
<col style="width:10%"/>
<col style="width:10%"/>
<col style="width:10%"/>
<col style="width:13%"/>
</colgroup>
<thead>
<tr class="title">
<th>所在小区</th>
<th>台变</th>
<th>异动类型</th>
<th>表箱名</th>
<th>时间</th>
</tr>
</thead>
</table>
其次定义表格的body部分:
<div class="table-scrollable table-scrollable-my ">
<table class="table table-hover dev-tab" style="table-layout:fixed;">
<colgroup>
<col style="width:10%;"/>
<col style="width:10%"/>
<col style="width:10%"/>
<col style="width:10%"/>
<col style="width:13%"/>
</colgroup>
<tbody>
</tbody>
</table>
</div>
</div>
需要注意的是,两个colgroup的col定义的宽度要一致,这样才可以实现表格的宽度自适应。
其次,给表格body赋值:
function drawFormList_bd(data){ // 定义一个渲染表格数据的方法
console.log(data,'6666666666')
var $listItem = $('<tr>\
<td class="xiaoQu"></td>\
<td class="taiBian"></td>\
<td class="type"></td>\
<td class="meterBoxName"></td>\
<td class="repairTime"></td>\
</tr>');
var $from = $(".dev-tab tbody").empty(); // 每次进入该方法,先让表格的tbody为空
if(data.records && data.records.length>0){
$(data.records).each(function(i){ // 循环给表格赋值
var self = this;
var $tmp = $listItem.clone();
$tmp.find('.taiBian').html(this.substationName);
$tmp.find('.xiaoQu').html(this.courtName)
$tmp.find('.meterBoxName').html(this.meterBoxName);
if(this.diffType == '2'){
$tmp.find('.type').html("增加");
}else{
$tmp.find('.type').html("减少");
}
$tmp.find('.repairTime').html(this.createTime ? moment(this.createTime).format("YYYY-MM-DD HH:mm:ss") : "-");
$from.append($tmp); // 将定义的html结构添加到刚刚表格的tbody下面
});
}else{
$from.append('<tr><td class="text-center danger" colspan="10">抱歉,没有找到数据</td></tr>');
}
}