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];
};