jquery.dataTable.js 繪製表格使用詳解__js

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