接上一篇文章，做好表格后的效果图：
问题是表格过长，而且未来还有可能增加更多的显示。怎么做才能更好的展示呢？
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();