您的位置:首页 > Web前端 > JQuery

jquery.dataTable.js 绘制表格使用详解

2017-11-30 17:53 573 查看
dataTable.js绘制表格真的是很不错,下面看看如何应用吧。
先导入dataTable.js的库吧!

定义html页面。
<div>
<div id="result">
<div class="close_btn"></div>
<table class="table table-hover table-striped" id="resulttable" >
<thead>
<tr>
<th>编号</th>
<th>单位代码</th>
<th>名称</th>
<th>总个数</th>
<th>面积</th>
</tr>
</thead>
</table>

</div>
</div>js代码
var resulttable = $('#resulttable').DataTable({
destroy: true,
// data: tableData,
order: [[ 2, "desc" ]],
fnDrawCallback: function(){
this.api().column(0).nodes().each(function(cell, i) {
cell.innerHTML =  i + 1;
});
},
pageLength:10,
language: {
"sProcessing": "处理中...",
"sLengthMenu": "显示 _MENU_ 项结果",
"sZeroRecords": "没有匹配结果",
"sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
"sInfoEmpty": "显示第 0 至 0 项结果,共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
}
});

这样你可以直接用ajax请求得到数据:
$.ajax({
url: url,
type: type,
data: {f:"json"},
timeout: 3600000,
dataType: 'json',
success: function (res) {
var features= res;
for(var j in features){
//计算面积
var a = features[j].attributes.qsdwdm;
var b = features[j].attributes.dlmc;
var c = features[j].attributes.COUNT;
var d = features[j].attributes.SUM_tbmj;
resulttable.row.add(['',a,b,c,d.toFixed(2)]).draw().node();
}
},
error: function (res) {
callback(res);
}
});
这里注意
d.toFixed(2)
就是面积保留2位小数点。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: