dataTable之自定义按钮实现全表 复制 打印 导出 重载

//本文对常用表格插件datatable 的自定义按钮功能键进行详细解释
//其中 15-78行是定义表单
//16 18 19 三行定义自定义功能按钮 实现对全表的 复制 打印 导出(csv即excel格式) 重载  “sdom” 和 “buttons”具有依赖性 缺一不可
//项目中可直接捏去使用 datatable的其他功能队长在后面会逐步跟载  

 1 <table id="datatable-buttonss" class="table table-striped table-bordered bulk_action " style="width:100%">
 2                            <thead>
 3                                <tr>
 4                                    <th>id</th>
 5                                    <th>任务名称</th>
 6                                    <th>优先级</th>
 7                                    <th>状态</th>
 8                                </tr>
 9                            </thead>
10                           <tbody></tbody>
11 </table>
12 
13 <script>
14         $(function () {
15             var table = $("#datatable-buttonss").DataTable({
16                  "sDom": '<"x_content"B><"top"lf>rt<"bottom"ip><"clear">', //定义处理范围
17                
18                  dom: "Blfrtip", //定义按钮的位置
19                 buttons: [          // 定义各按钮
20                      {
21                          extend: "copy",
22                          text: '复制',
23                          className: "btn-sm"
24                      },
25                      {
26                          extend: "csv",
27                          text: '导出',
28                          className: "btn-sm"
29                      },
30                      {
31                          extend: "print",
32                          text: '打印',
33                          className: "btn-sm"
34                      },
35                      {
36                          text: '重新获取',
37                          action: function ( e, dt, node, config ) {
38                              dt.ajax.reload();
39                          },
40                          className: "btn-sm"
41                     },
42                  ],
43                 responsive: true,
44                 ajax:"/task_mgm/taskinfo_all_data",
45                 "columnDefs": [
46                     {
47                         "targets": [ 0 ],
48                         "width": "10%",
49                     },
50                     {
51                         "targets": [ 1 ],
52                         "sorting": false,
53                         "render": function (data, type, full, meta) {
54                             // return '<a href="/task_mgm/task" >'+ data +'</a>'
55                             AA = function js_method() {
56                                 $.get("/task_mgm/taskinfo_comment")
57                             };
58                             return '<a href="javascript:void(0);" οnclick="AA()">'+ data +'</a>'
59                         }
60 
61                     },
62                     {
63                         "targets": [ 2 ],
64                         "width": "15%",
65                     },
66                     {
67                         "targets": [ 3 ],
68                         "data": null,
69                         "width": "10%",
70                         "sorting": false,
71                         "defaultContent": "<i class=\"fa fa-edit\" id=\"edit\">编辑</i>",
72                         // "render": function (data, type, row, meta) {
73                         //     if([row[4] == "0"]){
74                         //         return  "<i class=\"fa fa-edit\" id=\"edit\">编辑</i>";
75                         //     }
76                         // }
77                     }],
78             });
79             // 行编辑
80             $("#datatable-buttonss tbody").on("click", "#edit", function () {
81                 alert(2222)
82             });
83 </script>

下面是实现的效果：

 

转载于:https://www.cnblogs.com/We612/p/10044826.html