[datatables -- 学习01]: 动态画出表格，并可以导出excel

最新推荐文章于 2021-07-04 06:23:18 发布

木瓜~

最新推荐文章于 2021-07-04 06:23:18 发布

阅读量667

点赞数

分类专栏： datatables 文章标签： datatables

本文链接：https://blog.csdn.net/corner2030/article/details/56486174

版权

datatables 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1：假如数据类型如下：主要用results的数据进行画表格

var data = {                                                                                                                                              
             "begin":1485100800,"end":1487606399,"interval":"day","productLineOpts":"TD LTE","productOpts":"TDD","systemOpts":"TL16A",
             "entityOpts":null,"bublOpts":null,"orgcatOpts":null,"level4Opts":null,"planeOpts":null,"groupOpts":null,"severityOpts":null,
             "typeOpts":null,"stateOpts":null,"customerPrOpts":null,"reportTypeOpts":"ORI_PRONTO","removeDuplicateOpts":"NO",
             "goalOpts":"DPM","targetOpts":"DPM","cnaOpts":null,"generateOpenSeriesDone":{"donetime":0,"number":29},"totalcosttime":1733,
             results: [ {"date": "2017W03", "stats" : [{"name": 'NA', "num": 30}, {"name": 'New Feature', "num": 55}, {"name": 'Legacy', "num": 33}]},
                        {"date": "2017W04", "stats" : [{"name": 'NA', "num": 40}, {"name": 'New Feature', "num": 30}, {"name": 'Legacy', "num": 43}]},
                        {"date": "2017W05", "stats" : [{"name": 'NA', "num": 20}, {"name": 'New Feature', "num": 30}, {"name": 'Legacy', "num": 22}]},
                        {"date": "2017W06", "stats" : [{"name": 'NA', "num": 25}, {"name": 'New Feature', "num": 45}, {"name": 'Legacy', "num": 44}]},
                        {"date": "2017W07", "stats" : [{"name": 'NA', "num": 49}, {"name": 'New Feature', "num": 38}, {"name": 'Legacy', "num": 60}]}
                    ]                                                                                               
        };

我们可以有两种方式画表格，其中该table可以用导出excel文档
需要引用下面的库：已经经过测试，可用


<link rel="stylesheet" href="css/jquery.dataTables.min.css">
<link rel="stylesheet" href="css/buttons.dataTables.min.css">
<link rel="stylesheet" href="css/dataTables.colVis.min.css">

<script src="lib/jquery-1.11.3.min.js"></script>

<script src="lib/moment.min.js"></script>
<script src="lib/lodash.min.js"></script>
<script src="lib/jquery.dataTables.min.js"></script>    
<script src="lib/dataTables.buttons.min.js"></script>
<script src="lib/buttons.colVis.min.js"></script>
<script src="lib/buttons.flash.min.js"></script>
<script src="lib/buttons.html5.min.js"></script>
<script src="lib/buttons.print.min.js"></script>
<script src="lib/dataTables.colVis.min.js"></script>
<script src="js/settings.js"></script>
<script src="js/utils.js"></script>

第一种函数形式：
在代码里面调用draw_table（data）就可以。

var draw_table = function(data) {
    var setting = {
        destroy: true,
        paging: true,
        scrollX: true,
        autoWidth: false,
        searching: true,
        stateSave: true,
        processing: true,
        lengthMenu: [
            [ 10, 100, -1 ],
            [ '10 rows', '100 rows','Show all' ]
        ],
        iDisplayLength: -1,
        buttons: [ 'excel'], //可以导出的excel，但必须应用几个js库
        data: data.results,
        columns: [  
                    {   title: formatTitleDate(data.interval),
                        data: 'date', render: function(data, type, row) {
                            return formatDate(data);
                        }
                    }
        ],
        order: [ 0, 'asc' ],
        "oLanguage": {
            "sLoadingRecords": "<img src='img/loading_3.gif'>  Loading "
        }

    }; //end setting

    var oneStats = data.results[0]["stats"];
    for(var i=0; i< oneStats.length; i++) {
        setting["columns"].push({
            title:oneStats[i]["name"],
            data: 'stats.' + i + '.num', render: function(data, type, row) {
                return "<a target='_blank' href='#' >" + data + "</a>";
            }
        });
    }
    function formatDate(data) {
        var formats = {day: 'YYYY-MM-DD', isoweek: 'YYYY[-]WW', month: 'YYYY[-]MM', year: 'YYYY', week: 'YYYY[-]ww'};
        // return moment(timestamp).format(formats[interval]);
        console.log("date_replace");console.log(data);
        return data.replace("W", "-");
    };

    function formatTitleDate(interval) {
        var formats = {day: 'Year-Month-Day', isoweek: 'Year-Week', month: 'Year-Month', year: 'Year', week: 'Year-Week(Non ISO)'};
        return formats[interval];
    };
    table = $('#example').DataTable(setting).draw();

第二种直接画图：
在代码里直接使用。

    var table = $('#example').DataTable( { 

        destroy: true,              
            //dom: 'T<"clear">BCfrtip',
            "dom": '<"top"CfB><rt><"bottom"ip><"clear">',
            //          "dom": '<"top"<"clear">>rt<"bottom"<"clear">>',
            paging:   true,             
            scrollX: true,
            autoWidth: false,               
            searching: true,
            stateSave: true,
            processing: true,
            lengthMenu: [
                  [ 10, 100, -1 ],
                  [ '10 rows', '100 rows','Show all' ]
              ],
              "iDisplayLength": -1,
//                    buttons: [
//                        'pageLength', 'copy', 'csv', 'excel' //to reinitialise data table,need to remove some buttons(pageLength,copy,csv)
//                    ],  
              buttons: [
                        'excel'
              ],                 
              data: data.results,
              columns: [                          
                        {   title: formatTitleDate(data.interval),
                            data: 'date', render: function(data, type, row) {
                                return formatDate(data);
                            }
                        },
                        {title: 'NA',
                         data: 'stats.0.num',
                         render: function(data, type, row) {
                            console.log('stats.0.num');console.log(data);
                             return "<a target='_blank' href='#' >" + data + "</a>";
                         }
                        },
                        {title: 'New Feature',
                         data: 'stats.1.num',
                         render: function(data, type, row) {
                             return "<a target='_blank' href='#' >" + data + "</a>";
                         }
                        },
                        {title: 'Legacy',
                         data: 'stats.2.num',
                         render: function(data, type, row) {
                             return "<a target='_blank' href='#' >" + data + "</a>";
                         }
                        }
                       ],
              order: [ 0, 'asc' ],
              "oLanguage": {
                  "sLoadingRecords": "<img src='img/loading_3.gif'>  Loading "
              }
        });
        function formatDate(data) {
            var formats = {day: 'YYYY-MM-DD', isoweek: 'YYYY[-]WW', month: 'YYYY[-]MM', year: 'YYYY', week: 'YYYY[-]ww'};
            // return moment(timestamp).format(formats[interval]);
            console.log("date_replace");console.log(data);
            return data.replace("W", "-");
        };

        function formatTitleDate(interval) {
            var formats = {day: 'Year-Month-Day', isoweek: 'Year-Week', month: 'Year-Month', year: 'Year', week: 'Year-Week(Non ISO)'};
            return formats[interval];
        };