[datatables -- 学习02]: datatables 导出 CSV和excel 文件，甚至copy内容

最新推荐文章于 2023-07-18 16:37:49 发布
最新推荐文章于 2023-07-18 16:37:49 发布
阅读量1.3k 收藏
点赞数
分类专栏： datatables
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/corner2030/article/details/60875040
版权

前端代码：

<!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];
    };
};
木瓜~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
DataTable针对xml、excel、csv导入和导出
dukeair的专栏
07-20 333
此段代码是针对DataTable 对xml、excel、csv 对文件的导入和导出功能，记录一下，以供以后使用。 　　一定要导入excel 并添加引用Microsoft.Office.Interop.Excel 11.0版本。 　　Default.aspx.cs文件 　　using System; 　　using System.Collections.Generic;
datatables 的 'copy', 'excel', 'pdf', 'csv', 'print' 的实现和基本选中
YKenan的博客
03-22 645
bootstrap 的 ‘copy’, ‘excel’, ‘pdf’, ‘csv’, ‘print’ 的实现和基本选中 此文件会随着时间不断更新 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri...
datatable导出excel(三种方法)
shuangyufrank的专栏
04-27 2158
方法一：(拷贝直接可以使用，适合大批量资料, 上万笔)  private void excelout()         {             Microsoft.Office.Interop.Excel.Application appexcel = new Microsoft.Office.Interop.Excel.Application();            
将Datatable导出到Excel三种方案以及分析（无NPOI）
u013759319的专栏
11-29 1万+
以下是未引用NPOI情况下，datatable导出excel的三种方案，并进行简单的分析。  说明：excelTable 要导出的excel string filePath, 保存文件的路径 string filename 保存的文件名 方案一，经典导出： Microsoft.Office.Interop.Excel.Application app =
把DataTable导出到EXCEL
最新发布
weixin_42992927的博客
07-18 312
把DataTable导出到EXCEL
dashboard-datatables-modal-crud：dashboard-datatables-modal-crud
02-27
"dashboard-datatables-modal-crud" 是一个基于JavaScript的项目，主要目标是实现数据表（DataTables）与模态对话框（Modal）的交互，用于创建、读取、更新和删除（CRUD）操作。在Web开发中，这种功能通常用于后台...
jquery-datatables-row-grouping:从 code.google.compjquery-datatables-row-grouping 自动导出
06-14
RowGrouping 加载项的文档介绍JQuery Datatables RowGrouping 插件是插件的附加插件。 它使您能够轻松处理客户端的分组操作。 这个插件是放置在上的示例的扩展，带有几个附加选项。细节RowGrouping 插件增强了数据表...
django-rest-framework-datatables：Django REST框架与Datatables之间的无缝集成
01-30
- **前端集成**：在HTML页面中引入Datatables的CSS和JS文件，然后设置Datatables的Ajax源为你刚刚创建的DRF API。 - **模板标签**：使用`django-rest-framework-datatables`提供的模板标签来渲染Datatables的配置，...
laravel-datatables-docs：Laravel DaTatables软件包文档
02-04
在`laravel-datatables-docs-master`压缩包中，通常包含了详细的使用文档、示例代码和教程，帮助开发者快速上手并深入理解Laravel DataTables的功能和用法。通过阅读这些文档，你可以更好地了解如何根据具体需求定制...
jQuery-Datatables-Server-Side-Processing：用于jQuery数据表的服务器端处理的插件
02-03
jQuery Datatables服务器端处理 ASP NET组件，为著名的jQuery表插件添加了自动服务器端处理功能。 它使用IQueryable接口来构造查询表达式到您的数据集合，可以由诸如实体框架的ORM处理。 支持： 分页； 搜索； ...
DataTables导出CVS Excel PDF
09-20
DataTables csv pdf Print 转换
datatable数据导出excel
10-07
datatable数据导出excel,datatable数据导出excel
JQuery DataTables 导出 Excel（文件导出，打印功能）
热门推荐
shuai_wy的专栏
11-23 3万+
JQuery DataTables 导出 Excel（文件导出，打印功能）
dataTables的导出Excel功能
浮生或茶
06-13 1400
dataTables的导出Excel功能 Datatables它是一款基于jQuery表格插件，钟情于它操作dom的灵活。做后台的同学想必使用它能事半功倍，而且交互强、容易扩展。 我也是最近要做公司后台界面，表格涉及的很多，所以考虑使用DT，刚上手（感觉还不错呢），不足之处欢迎指正！：) datatables本身就提供了导出excel、csv、...
datatables插件导出excel【指定excel单元格格式，禁止用科学计数法显示】
Chaya&SH的博客
12-19 6822
datatables插件导出excel【指定excel单元格格式，禁止用科学计数法显示】1.导出excel时将单元格数据转换成文本 datatables插件下载excel时，单元格数据是超过十位数的数字字符串（数据类型是string），下载时却用科学计数法显示，不符合需求。（最常见的就是下载身份证号码的情况）。如果不做任何额外设置，下载的excel会如图以科学计数法的形式显示，需双击后才会显示正常
Jquery datatables 导出excel 合并行或者列
weixin_42349358的博客
05-31 1377
Datatables 插件导出是不支持excel行或列合并的。查看源代码，导出excel 主要依赖 OOXML ，所以只需要生成对应的XML即可。&lt;worksheet . . .&gt; . . . &lt;cols&gt; &lt;col min="1" max="1" width="26.140625" customWidth="1"/&gt; . . . &lt
将DataTable中的大量数据导出到Excel表格中。
ToString的博客
03-14 750
将DataTable中的大量数据导出到Excel表格中。 但每张Excel表单只能有65536行，所以当DataTable数据多于65536行时，Excel要考虑分页功能。 通过查阅相关资料，得到导出方法。 代码在Office 2003 环境下通过。末验证其它Office版本。 using Excel = Microsoft.Office.Interop.Excel; public...
dataTables——buttons中的excel按钮，导出固定行列的数据
weixin_43235307的博客
12-16 686
buttons: [ { text: '<i class="bx bxs-download" title="导出excel"></i>', extend: 'excel', title: 'XXX-XX详情信息表', //导出的excel标题 // className: 'btn btn-primary' //按钮的class样式 } ],
Datatables导出excel问题，不能显示excel按钮！
weixin_30515513的博客
07-09 755
最近在使用datatables但是发现一个问题，能导出csv就是不能导出excel 最好发现少引用一个js 加入后正常https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js $('#tableAssetRelease').DataTable({ dom: '<"top"Bfr>...
datatables导出到excel文件
06-28
要将Datatables导出到Excel文件，您可以使用以下步骤： 1. 在Datatables中选择要导出的数据。 2. 使用JavaScript将数据转换为Excel格式。 3. 创建一个Excel文件并将数据添加到文件中。 4. 提供一个下载链接，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

木瓜~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值