接上一篇文章,做好表格后的效果图:
问题是表格过长,而且未来还有可能增加更多的显示。怎么做才能更好的展示呢?
bootstrap里有一个advance table的一个东西,官方范例使用:https://datatables.net/
使用后的效果:
可以看到最大的优点是有了可折叠的表框,支持缩放。同时还能控制页数、支持搜索。真的很棒
这里分享一个在使用中遇到的问题:
这个表单的优化很好做,就是事先有一个表单,然后在js里加上这一句话就好:
<script>
$(document).ready(function() {
$('#dataTables-example').DataTable({
responsive: true
});
});
</script>
但是,我是动态的往表格里写入数据。并不是一个提前就做好的静态表。所以新加入的数据的行并没有更改格式。一开始我以为问题是出在这句话$(document).ready(function()
因为这个的意思是等组件都加载完成后再执行。所以改到了添加数据的后面。还是不行。
可能我这个并不是完美的解决方法吧,但是这样做确实解决了问题:
1.表格里需要最少需要一组静态数据,不能完全空,为了好看可以将这个数据隐藏。
<tr class="gradeX" style="display:none">
<td>test</td>
<td>CBTS18_FSM4_MZ_0700_000306_TITAN_aa41817</td>
<td>5</td>
<td>0</td>
<td class="center">CBTS18_FSM4_MZ_0700_000306_TITAN_aa41817</td>
<td class="center">CBTS18_FSM4_MZ_0700_000306_TITAN_aa41817</td>
<td>lastest</td>
<td>lastest</td>
</tr>
2.在新增数据后再单独调用函数,把整个table的style更改。
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Typical action to be performed when the document is ready:
//alert(xhttp.responseText);
var note=JSON. parse(xhttp.responseText);
for(var key in note){
var table = document.getElementById("TITANRelease");
var tr = table.insertRow(1);
var date=new Date();
tr.insertCell(0).innerText=note[key].time;
tr.insertCell(1).innerText=note[key].TITANRelease;
tr.insertCell(2).innerText=note[key].RAPCell;
tr.insertCell(3).innerText=note[key].multiRAP;
tr.insertCell(4).innerText=note[key].titanmain;
tr.insertCell(5).innerText=note[key].oam;
tr.insertCell(6).innerText=note[key].redis;
tr.insertCell(7).innerText=note[key].iphyUte;
}
addTR();
}
};
xhttp.open("GET", "http://10.140.160.64:3000/servers/titan-releases", true);
xhttp.send();
function addTR(){
$('#TITANRelease')
.addClass( 'nowrap' )
.dataTable( {
responsive: true,
columnDefs: [
{ targets: [-1, -3], className: 'dt-body-right' }
]
} );
}
这里我把更改table样式的方法单独封装,在每次取出数据,并创好tr并加入table之后,最后在调用它。
使用之后除了多了一组无用的数据外,这个 表格自带的排序、搜索、分页都可以使用,目前没有发现bug。
Datatable 简单的基本配置
$(document).ready(function() {
$(
'#example'
).dataTable({
"sScrollX" : "100%" , //表格的宽度 "sScrollXInner" : "110%" , //表格的内容宽度 "bScrollCollapse" : true , //当显示的数据不足以支撑表格的默认的高度时,依然显示纵向的滚动条。(默认是false) "bPaginate" : true , //是否显示分页 "bLengthChange" : true , //每页显示的记录数 "bFilter" : true , //搜索栏 "bSort" : true , //是否支持排序功能 "bInfo" : true , //显示表格信息 "bAutoWidth" : false , //自适应宽度 "aaSorting" : [[1, "asc" ]], //给列表排序 ,第一个参数表示数组 (由0开始)。1 表示Browser列。第二个参数为 desc或是asc "aoColumns" : [ null , null , { "bVisible" : true , //不可见 "bSearchable" : false , //参与搜索 }, null , null ], //列设置,表有几列,数组就有几项 "bStateSave" : true , //保存状态到cookie *************** 很重要 , 当搜索的时候页面一刷新会导致搜索的消失。使用这个属性就可避免了 "sPaginationType" : "full_numbers" , //分页,一共两种样式,full_numbers和two_button(默认) "oLanguage" : { "sLengthMenu" : "每页显示 _MENU_ 条记录" , "sZeroRecords" : "对不起,查询不到任何相关数据" , "sInfo" : "当前显示 _START_ 到 _END_ 条,共 _TOTAL_ 条记录" , "sInfoEmtpy" : "找不到相关数据" , "sInfoFiltered" : "数据表中共为 _MAX_ 条记录)" , "sProcessing" : "正在加载中..." , "sSearch" : "搜索" , "sUrl" : "" , //多语言配置文件,可将oLanguage的设置放在一个txt文件中,例:Javascript/datatable/dtCH.txt "oPaginate" : { "sFirst" : "第一页" , "sPrevious" : " 上一页 " , "sNext" : " 下一页 " , "sLast" : " 最后一页 " } }, //多语言配置 "bJQueryUI" : false , //可以添加 jqury的ui theme 需要添加css |
"aLengthMenu" : [[10, 25, 50, -1, 0], [ "每页10条" , "每页25条" , "每页50条" , "显示所有数据" , "不显示数据" ]] //设置每页显示记录的下拉菜单 }); }); |
直接调用默认的设置
$(
'#example'
).dataTable();