[datatables -- 学习02]: datatables 导出 CSV和excel 文件，甚至copy内容
2017-03-08 16:30
661 查看
前端代码：
JS代码：fault_feature_details.js
<!DOCTYPE HTML>
<html>
<head>
<base href="/"/>
<meta charset="utf-8">
<title>Fault Feature details</title>
<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>
<!--<link href="css/bootstrap.min.css" rel="stylesheet">-->
<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>
</head>
<body>
<div class="section">
<div class="container">
<div>
<div class="content" id="header">
</div>
<table id="example" class="display" cellspacing="0" width="100%" style="white-space: nowrap;text-overflow: ellipsis;">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</body>
<script src="js/fault/fault_feature_details.js"></script> //我的JS文件
<script type="text/javascript">
var link = window.location.href;
var featureType = link.replace(/.*fetOpts=(.*?)&.*/, "$1").replace("_", " ").replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
if (window.location.href.indexOf("New_Feature") != -1) {
$('#header').append('<h2>'+ featureType + '\'s Pronto details of New Feature</h2>');
}else if (window.location.href.indexOf("Legacy") != -1) {
$('#header').append('<h2>'+featureType+'\'s Pronto details of Legacy</h2>');
} else if (window.location.href.indexOf("NA") != -1){
$('#header').append('<h2>'+featureType+'\'s Pronto details of NA</h2>');
}
draw_detail_table();
</script>
</html>JS代码：fault_feature_details.js
'use strict';
var multiselectButtons = ['interval','productLineOpts', 'productOpts', 'systemOpts', 'entityOpts',
'buBlOpts', 'orgCatOpts','planeGroupedOpts', 'planeOpts', 'level4DuOpts',
'componentOpts',
'severityOpts', 'typeOpts', 'stateOpts', 'customerPrOpts',
'reportTypeOpts', 'removeDuplicateOpts', 'goalOpts',
'targetOpts', 'cnaOpts', 'monshoOpts', 'fetOpts'];
function getParamsFromUrl() {
var params = {};
params['begin'] = decodeURIComponent($.getUrlParam('begin'));
params['end'] = decodeURIComponent($.getUrlParam('end'));
params['intervalbegin'] = decodeURIComponent($.getUrlParam('intervalbegin'));
params['name'] = decodeURIComponent($.getUrlParam('name'));
_(multiselectButtons).forEach(function(d) {
params[d] = decodeURIComponent($.getUrlParam(d));
});
return params;
};
function formatUrl(prefix, params) {
return prefix + ($.isEmptyObject(params) ? '' : '?' + $.param(params));
};
function draw_detail_table() {
var params = getParamsFromUrl();
var geturl = formatUrl(Settings.apiUrl + '/fault_feature/feature_details/get' , params);
$('#example').DataTable( {
"dom": '<"top"CfB<"clear">>rt<"bottom"ip<"clear">>',
paging: true,
lengthMenu: [
[ 10, 100, -1 ],
[ '10 rows', '100 rows', 'Show all' ]
],
buttons: [
'pageLength', 'copy', 'csv', 'excel'
],
serverSide: false,
ajax: {
url: geturl,
type: 'GET',
dataSrc: 'results'
},
scrollX:false,
autoWidth:false,
columns: [
{title: formatTitleDate(params['interval']),
data: "createtimestamp", render: function(data, type, row) {
return formatDate(data*1000, params['interval']);
}},
{title: "Problem Report ID", data: "prid"},
{title: "Problem ID", data: "faultid"},
{title: "Title", data: "title"},
{title: "State", data: "state"},
{title: "SD Status", data: "debug" || ""},
{title: "Feature", data: "feature"},
{title: "TA Feature", data: "ta_feature"},
{title: "Top Importance", data: "top_importance"},
{title: "Days PR is open", data: "debug" || ""},
{title: "Days since PR GiC last Changed", data: "debug" || ""},
{title: "Duplicate", data: "debug" || ""},
{title: "PR Optional", data: "pr_optional"},
{title: "PR Additional", data: "pr_additional"},
{title: "Severity", data: "severity"},
{title: "Priority", data: "priority"},
{title: "Release", data: "release"},
{title: "SD Release", data: "debug" || ""},
{title: "SW Build", data: "sw_build"},
{title: "SD Build", data: "debug" || ""},
{title: "System Release", data: "debug" || ""},
{title: "Repeatability", data: "prrepeatability"},
{title: "PR Reported Date", data: "createtime"},
{title: "Author", data: "author"},
{title: "Author Group", data: "author_group"},
{title: "Discovered", data: "discovered"},
{title: "Test Subphase", data: "test_subphase"},
{title: "Group In Charge", data: "group_in_charge"},
{title: "Fault Coordinator", data: "development_fault_coordinator"},
{title: "BU", data: "debug" || ""},
{title: "Level4/DU", data: "debug" || ""},
{title: "Level4 Manager", data: "debug" || ""},
{title: "Plane Grouped", data: "debug" || ""},
{title: "System Component", data: "debug" || ""},
{title: "Platform", data: "platform"},
{title: "Shoule have been found in", data: "should_have_been_found_in"},
{title: "Root Cause", data: "root_cause"},
{title: "# of Transfers(Group)", data: "debug" || ""},
{title: "# of Transfers(SC)", data: "debug" || ""},
{title: "PROD", data: "prod"},
{title: "Product", data: "debug" || ""},
{title: "Product Line", data: "debug" || ""},
{title: "Type", data: "type"},
{title: "From Electra", data: "from_electra"},
{title: "Reported By", data: "reported_by"},
{title: "Customer", data: "customer"},
{title: "Close Enter", data: "closedenter", render: function(data, type, row) {
return data ? formatDate(data*1000, params['interval']) : "NA";
}},
{title: "Close Exit", data: "debug" || ""},
{title: "CF Creation Date", data: "debug" || ""},
{title: "CF Tested Date", data: "debug" || ""}
],
"columnDefs": [
// {data: null,
// defaultContent: "",
// targets: [6]},
// {data: null,
// defaultContent: "",
// targets: [23]}
],
order: [ 1, 'asc' ],
"oLanguage": {
"sLoadingRecords": "<img src='img/loading_3.gif'> Loading "
},
bScrollInfinite: true
} );
function formatDate(timestamp, interval) {
var formats = {day: 'YYYY-MM-DD', isoweek: 'YYYY[-]WW', month: 'YYYY[-]MM', year: 'YYYY', week: 'YYYY[-]ww'};
return moment(timestamp).format(formats[interval]);
};
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];
};
};
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【一步一步学习VBA】将Excel内容导出为单个txt文件
- 导出csv,excel等文件，文件内容错误的问题，需要加上ob_end_clean
- Python处理unicode编码的txt文件（Python中文处理）——解决to_excel()和to_csv()导出文件内容为空的问题
- 将Excel或CSV文件中的数据导出到DataSet
- php数据导入导出之excel(csv文件)
- 导出数据到CSV和EXCEL文件，过长的数值被转义的解决方法
- silverlight开发：将datagrid中的数据导出为Excel和CSV文件
- magento -- 在导出CSV时进行转码以保证用excel打开有中文的CSV文件时不会乱码
- DataGrid内容导出标准的Excel格式文件
- 将控件内容导出为Excel文件
- 用Excel打开csv文件时，如何处理数字内容展现会自动转换格式的问题
- 导出excel文件问题[WEB学习实例]
- C#导出数据到CSV和EXCEL文件时，过长的数值被转义的解决方法
- 学习拾遗 --导出excel文件 解决科学计数法问题
- Excel打开从PL/SQL Deleveloper导出的csv文件乱码问题
- asp.net 将内容导出EXCEL文件(转)
- 学习拾遗 --导出excel文件 解决科学计数法问题
- DataGrid内容导出Excel文件（C#）
- Java中读取Excel文件的内容和导出数据到Excel文件
- 用Excel打开csv文件时，如何处理数字内容展现会自动转换格式的问题