datatable导出按钮（excel）的设计（官方非自定义）

一时失言乱红尘 2022-12-26 14:29 220阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>1151s</title>
    
      
      <link rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
      
      <link rel="stylesheet" href="../../plugins/fontawesome-free/css/all.min.css">
      
      <link rel="stylesheet" href="../../plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
      <link rel="stylesheet" href="../../plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
      <link rel="stylesheet" href="../../plugins/datatables-buttons/css/buttons.bootstrap4.min.css">
      
      <link rel="stylesheet" href="../../dist/css/adminlte.min.css">
      <style>
        body,
        html { 
          padding: 30px;
        }
    
        .bottom>div { 
          display: inline-block;
        }
    
        #example_paginate { 
          float: right;
        }
    
        #example_length { 
          margin-left: 10px;
        }
    
        /* #btnshow>div { display: flex; } #btnshow>div>button { margin: auto; } */
      </style>
    </head>
    
    <body>
      
      <div class="search">
        用户名称：<input type="text" class="input-text" style="width:250px" placeholder="输入用户名称" id="name" name="name">
        用户手机：<input type="text" class="input-text" style="width:250px" placeholder="输入用户电话" id="phone" name="phone">
        <button type="submit" class="btn btn-success" onclick="search()"><i class="icon-search"></i> 搜用户
        </button>
      </div>
      
      <div id="btnshow">
        <div class="dt-buttons btn-group flex-wrap" style="margin-left:30px">
          <button class="btn btn-secondary buttons-copy buttons-html5" tabindex="0" aria-controls="example"
            type="button"><span>组1</span></button>
          <button class="btn btn-secondary buttons-copy buttons-html5" tabindex="0" aria-controls="example"
            type="button"><span>组2</span></button>
        </div>
        <button class="btn btn-success">添加</button>
      </div>
      <table id="example" class="table table-bordered table-hover table-sm">
    
        <thead class="thead-light">
          <tr>
    
          </tr>
        </thead>
    
      </table>
    
      
      <script src="../../plugins/jquery/jquery.min.js"></script>
      
      <script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
      
      <script src="../../plugins/datatables/jquery.dataTables.min.js"></script>
      <script src="../../plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
      <script src="../../plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
      <script src="../../plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
      <script src="../../plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
      <script src="../../plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
      <script src="../../plugins/jszip/jszip.min.js"></script>
      <script src="../../plugins/pdfmake/pdfmake.min.js"></script>
      <script src="../../plugins/pdfmake/vfs_fonts.js"></script>
      <script src="../../plugins/datatables-buttons/js/buttons.html5.min.js"></script>
      <script src="../../plugins/datatables-buttons/js/buttons.print.min.js"></script>
      <script src="../../plugins/datatables-buttons/js/buttons.colVis.min.js"></script>
      
      <script src="../../dist/js/adminlte.min.js"></script>
      
      <script src="../../dist/js/demo.js"></script>
      
      <script>
    
        var timer = null; //延时搜索，
        var timeout = 1000; // 当在搜索时，只有超过间隔时间（1000）才开始搜索
        var url = "./demo.php" //请求地址
        var delurl = "./demo.php" //请求地址
        var table = null; //表格
        var request = (url, params, method = "GET") => { 
          return new Promise((resolve, reject) => { 
            $.ajax({ 
              type: method,
              url: url,
              cache: false, //禁用缓存
              data: params, //传入组装的参数
              dataType: "json",
              success: function (result) { 
                resolve(result);
              },
              error: function () { 
                reject('出错')
              }
            });
          })
        }
        // 修改
        function update(me) { 
          var row = table.rows($(me).parents('tr')).data()[0]; // 选中行数的数据
          alert('修改：' + JSON.stringify(row))
        }
        // 删除
        async function del(me) { 
          var row = table.rows($(me).parents('tr')).data()[0]; // 选中行数的数据
          var {  first_name } = row; //这里一般是主键，但是没有传过来的id值，这里就用name替代了
          var param = {  first_name, method: 'del' }; //传递的参数，也可以在添加一些判断条件
          var res = await request(delurl, param);
          if (res && res.code == 0) {  //判断返回的数据
            $(me).parents('tr').remove();
            alert('删除成功')
          }
        }
        // 搜索
        function search() { 
          table.draw();
        }
        $(document).ready(function () { 
          table = $("#example").DataTable({ 
            "processing": true,
            "serverSide": true,
            ajax: function (data, callback, settings) { 
              // 自定义搜索
              data.search = { 
                name: $('#name').val(),
                phone: $('#phone').val(),
              }
              // console.log(data);
              request(url, data).then(result => { 
                callback(result);
              })
            },
            "columns": [{ 
              'sTitle': '第一个名字', //在thead中显示，有过原来有thead则替换
              "data": "first_name",
              "width": '20%',
              'render': function (data, type, row) { 
                return "<span style='color:red'>" + data + '</span>';
              },
              'class': 'text-center', //添加一个css
            },
            { 
              'sTitle': '最后一个名字', //在thead中显示，有过原来有thead则替换
              "data": "last_name", "orderable": false
            },
            { 
              "sTitle": '操作',
              "orderable": false,
              'render': function (data, type, row) { 
                return ` <button type="button" class="btn btn-sm btn-info" οnclick="update(this)">修改</> <button type="button" class="btn btn-sm btn-danger " οnclick="del(this)">删除</button> `;
              },
            }
    
            ],
            "language": //把文字变为中文
            { 
              "sProcessing": "加载中...",
              "sLengthMenu": "每页显示 _MENU_ 条记录",
              "sZeroRecords": "没有匹配结果",
              "sInfo": "第 _START_ - _END_ 条,共计 _TOTAL_ 条",
              "sInfoFiltered": "",
              "sInfoPostFix": "",
              "sSearch": "搜索:",
              "sUrl": "",
              "sEmptyTable": "表中数据为空",
              "sLoadingRecords": "载入中...",
              "sInfoThousands": ",",
              "oPaginate": { 
                "sPrevious": "<", //上一页
                "sNext": ">", //下一页
              },
            },
            'aLengthMenu': [3, 10, 20, 30], //设置每页显示记录的下拉菜单
            dom: 'Bt<"bottom"ilp><"clear">',
            "buttons": [
              "copy", "pdf",
              "csv",
              {  extend: 'pdf', text: '导出为pdf', filename: '数据表', title: '标题', },
              {  extend: 'csv', text: '导出为csv', filename: '数据表', title: '标题', },
              {  extend: "print", text: '导出为print', filename: '数据表', title: '标题', },
              { 
                extend: 'collection',
                text: '导出',
                className: "btn-success",
                buttons:
                  [
                    { 
                      extend: 'copy',//使用 excel扩展
                      text: '复制本页数据',// 显示文字
    
                    },
                    {  extend: 'pdf', text: '导出为pdf', filename: '数据表', title: '标题', },
                    {  extend: 'csv', text: '导出为csv', filename: '数据表', title: '标题', },
                    {  extend: "print", text: '导出为print', filename: '数据表', title: '标题', },
                    {  extend: 'excel', text: '导出为excel', filename: '数据表', title: '标题', },],
                // fade: true
              }
              ,
              { 
                extend: "colvis",
                text: '显示列',
                className: "btn-info",
    
              },
    
            ],
    
            "autoWidth": false,
            searching: false,
    
          })
          table.buttons().container().prependTo('#btnshow'); //将按钮添加到自己新建的expot中
          // $("#btnshow>div").removeClass()
    
        });
    
    
    
      </script>
    </body>
    
    </html>

搜索和导出等按钮自定义看这个[https://blog.csdn.net/weixin\_44797182/article/details/110730229][https_blog.csdn.net_weixin_44797182_article_details_110730229]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70]: /images/20221120/3a4db43835c04a3185d183e97b6d586c.png
[https_blog.csdn.net_weixin_44797182_article_details_110730229]: https://blog.csdn.net/weixin_44797182/article/details/110730229