adminlte中datatable中自定义搜索和导出按钮


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

  • 按钮：分了两种，有一个特殊的类型colvis和普通的按钮
    • colvis

      (

      "

      .

      c

      o

      l

      v

      i

      s

      "

      )

      .

      h

      t

      m

      l

      (

      (".colvis").html(

      (".colvis").html(("#example_wrapper .buttons-colvis")); 直接写入dom元素

    • 普通导出按钮；
    1. 在datatable写出按钮并在页面上显示
    2. 自定义按钮，属性名data-type的值就是按钮的extend值
    3. 点击自定义按钮，触发名字相同的按钮的点击事件
  • 搜索
    1. 定义一个搜素的表单，定义一个点击事件（不是提交）
    2. 点击后刷新表单
    3. 在datatable提交数据时，将搜索表单一起传递

后台返回格式

1
2
3
4
5
6
$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"],]
];

在这里插入图片描述

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
<!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>

当然了，还有之前自己写的官方版本，并不完善，仅供参考，
官方按钮和自定义搜索
https://blog.csdn.net/weixin_44797182/article/details/110730279

官方按钮和搜索
https://blog.csdn.net/weixin_44797182/article/details/110634680