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

来源：互联网发布：linux 新建数据库实例编辑：程序博客网时间：2024/05/19 01:07

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位小数点。

阅读全文

0 0