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位小數點。

總結

以上是生活随笔為你收集整理的jquery.dataTable.js 绘制表格使用详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。