adminlte中datatable中自定义搜索和导出按钮_vben admin表单重置后面增加导出按钮-CSDN博客

本文链接：https://blog.csdn.net/weixin_44797182/article/details/110730229

为了方便使用，即使是不懂datatable的人也能上手使用，所以还是自定义的好，按钮和搜索直接和往常一样根据html中定义

按钮：分了两种，有一个特殊的类型colvis和普通的按钮
- colvis $(" . c o l v i s ") . h t m l ($ ("#example_wrapper .buttons-colvis")); 直接写入dom元素
- 普通导出按钮；
1. 在datatable写出按钮并在页面上显示
2. 自定义按钮，属性名data-type的值就是按钮的extend值
3. 点击自定义按钮，触发名字相同的按钮的点击事件
搜索
1. 定义一个搜素的表单，定义一个点击事件（不是提交）
2. 点击后刷新表单
3. 在datatable提交数据时，将搜索表单一起传递

后台返回格式

$data = [
  "draw" => $_GET['draw'],
  "recordsTotal" => 570, //所有数据
  "recordsFiltered" => 60,// 过滤后的数据
  "data" => [["first_name" => "Airi", "last_name" => "Satou", "position" => "Accountant", "office" => "Tokyo", "start_date" => "28th Nov 08", "salary" => "$162,700",], ["first_name" => "Angelica", "last_name" => "Ramos", "position" => "Chief Executive Officer (CEO)", "office" => "London", "start_date" => "9th Oct 09", "salary" => "$1,200,000"], ["first_name" => "Ashton", "last_name" => "Cox", "position" => "Junior Technical Author", "office" => "San Francisco", "start_date" => "12th Jan 09", "salary" => "$86,000"],]
];

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AdminLTE 3 | DataTables</title>

  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet"
    href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="../../plugins/fontawesome-free/css/all.min.css">
  <!-- DataTables -->
  <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">
  <!-- Theme style -->
  <link rel="stylesheet" href="../../dist/css/adminlte.min.css">

  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <!-- 图标 -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

  <style>
    body,
    html {
      padding: 30px;
    }

    .bottom>div {
      display: inline-block;
    }

    #example_paginate {
      float: right;
    }

    #example_length {
      margin-left: 10px;
    }

    .customer .dropdown-toggle::after {
      /* 去除下拉列表小三角 */
      display: none
    }

    .customer .btn-secondary {

      background-color: white;

    }

    .style2>div {
      float: right;
      padding-left: 5px;
    }
  </style>
</head>

<body>
  <div class="customer">
    <!-- 自定义搜索表单，搜索的内容就是表单的内容 -->
    搜索样式
    <form id="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="button" class="btn btn-success" onclick="search()"> 搜用户</button>
    </form>
    <!-- 自定义按钮，注意data-type的值为datatable中按钮的值 -->
    <br> 按钮样式1
    <div class="style1">
      <div class="btns">
        <button type="button" class="btn btn-success" data-type="copy"> 复制本页数据</button>
        <button type="button" class="btn btn-primary" data-type="pdf"> 导出为pdf</button>
        <button type="button" class="btn btn-info" data-type="csv"> 导出为csv</button>
        <button type="button" class="btn btn-warning" data-type="print"> 导出为print</button>
        <button type="button" class="btn btn-danger" data-type="excel"> 导出为excel</button>
        <button type="button" class="btn btn-success" data-type="colvis"> 导出为colvis</button>
        <button type="button" class="btn btn-link"> 添加</button>

      </div>
    </div>
    <br> 按钮样式2
    <div class="style2">
      <div class="dropdown">
        <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
          <span class="glyphicon glyphicon-download-alt"></span>
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" data-type="copy"> 复制本页数据</a>
          <a class="dropdown-item" data-type="pdf"> 导出为pdf</a>
          <a class="dropdown-item" data-type="csv"> 导出为csv</a>
          <a class="dropdown-item" data-type="print"> 导出为print</a>
          <a class="dropdown-item" data-type="excel"> 导出为excel</a>
          <a class="dropdown-item" data-type="colvis"> 导出为colvis</a>
        </div>
      </div>
      <div class="colvis">
        <!-- 显示列 -->
      </div>
    </div>
  </div>

  <!-- 数据表格显示 -->
  <table id="example" class="table table-bordered   table-hover  table-sm">
    <thead class="thead-light"> </thead>
  </table>

  <!-- jQuery -->
  <script src="../../plugins/jquery/jquery.min.js"></script>
  <!-- Bootstrap 4 -->
  <script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
  <!-- DataTables  & Plugins -->
  <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>
  <!-- AdminLTE App -->
  <script src="../../dist/js/adminlte.min.js"></script>
  <!-- AdminLTE for demo purposes -->
  <script src="../../dist/js/demo.js"></script>
  <!-- Page specific script -->
  <script>
    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();
    }
    // 导出-自定义按钮功能实现，只和data-type属性有关
    $("[data-type]").on('click', function () {
      var name = $(this).attr('data-type');
      $('.buttons-' + name).click();
    })

    $(document).ready(function () {
      table = $("#example").DataTable({
        "processing": true,
        "serverSide": true,
        ajax: function (data, callback, settings) {
          // 自定义搜索
          var formSearch = $("#search").serializeArray();
          data.search = formSearch;
          console.log('提交的数据：', data);
          request(url, data).then(result => {
            // console.log('返回的数据：', 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": [
          { extend: 'copy', 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: '标题', },
          { extend: "colvis", text: '       <span class="glyphicon glyphicon-th-list"></span>', className: "btn btn-outline-secondary  " },
        ],
        "autoWidth": false,
        searching: false,
      })
      // 按钮设置，但是有个特殊的就是colvis
      $(".colvis").html($("#example_wrapper .buttons-colvis"));
      $("#example_wrapper  .dt-buttons").hide(); //隐藏按钮，使用自定义按钮
    });



  </script>
</body>

</html>