Datatable 表格背景色与导出Excel时有背景色

最新推荐文章于 2021-12-15 23:56:42 发布

李栋盛

最新推荐文章于 2021-12-15 23:56:42 发布

阅读量4.2k

点赞数

分类专栏： Datatable 前端技术文章标签： Datatable 表格背景色生成excel背景色

本文链接：https://blog.csdn.net/linkedin_37345339/article/details/78291390

版权

本文介绍了如何使用jQuery Datatable插件来实现网页表格数据展示时添加背景色，并在导出为Excel文件时保留这些背景色。通过引入必要的JS库，配置HTML和初始化Datatable时设定单元格样式，可以完成这一需求。

摘要由CSDN通过智能技术生成

1.需求描述

最近有这样一个需求，在页面用表格展示数据的时候，赋予相应的背景色，并在导出表格生成excel文件时有对应的背景色，现用jQuery Datatable这款插件完成这项功能。

2.分析

1在页面初始化表的时候，需要有背景色

2在生成excel表时候,需要有背景色

3.代码讲解

1.页面需要导入的js

<script src="DataTables-1.10.15/media/js/jquery.dataTables.min.js"></script>
<script src="DataTables-1.10.15/media/js/dataTables.bootstrap4.js"></script>
<link rel="stylesheet" href="DataTables-1.10.15/media/css/dataTables.bootstrap4.css">

<script src="DataTables-1.10.15/extensions/Buttons/js/dataTables.buttons.js"></script>
<link rel="stylesheet" href="DataTables-1.10.15/extensions/Buttons/css/buttons.dataTables.css">

<script src="DataTables-1.10.15/extensions/Buttons/js/buttons.html5.js"></script>

<script src="DataTables-1.10.15/extensions/Buttons/js/jsZIP.js"></script>
<link rel="stylesheet" href="DataTables-1.10.15/extensions/Buttons/css/buttons.bootstrap4.css">

显然我的Datatable版本是1.10.15的

其中除了jsZIP以外，其它的datatable包中都有.

2.html

<table id="table" class="table table-striped m-b-none" style="">
    <thead>
    <tr>
        <th>波长编号</th>
        <th>标准波长(nm)/频率(THz)</th>
        <th>中心波长(nm)/频率(THz)</th>
        <th>波长偏差(nm)</th>
        <th>光功率(dBm)</th>
        <th>OSNR(dB)</th>
    </tr>
    </thead>
    <tbody id="table_tbody">
    <tr class='odd'><td colspan='6' class='dataTables_empty' valign='top'>Loading...</td></tr>
    </tbody>
</table>

3.表格初始化单元格有背景色代码以及讲解

$("#table").DataTable({
    "columns": [
        { "data": "dwdmNumber" },
        { "data": "swlf" },
        { "data": "cwlf" },
        { "data": "wldeviation" },
        { "data": "opticalPower" },
        { "data": "osnr" }
    ],
    data:main_light_data,
    dom: 'Bfrtip',
    "createdRow": function ( row, data, dataIndex )   {
        //console.log(d