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%">
                            <thead>
                                <tr>
                                    <th>id</th>
                                    <th>任务名称</th>
                                    <th>优先级</th>
                                    <th>状态</th>
                                </tr>
                            </thead>
                           <tbody></tbody>
 </table>

 <script>
         $(function () {
             var table = $("#datatable-buttonss").DataTable({
                  "sDom": '<"x_content"B><"top"lf>rt<"bottom"ip><"clear">', //定义处理范围

                  dom: "Blfrtip", //定义按钮的位置
                 buttons: [          // 定义各按钮
                      {
                          extend: "copy",
                          text: '复制',
                          className: "btn-sm"
                      },
                      {
                          extend: "csv",
                          text: '导出',
                          className: "btn-sm"
                      },
                      {
                          extend: "print",
                          text: '打印',
                          className: "btn-sm"
                      },
                      {
                          text: '重新获取',
                          action: function ( e, dt, node, config ) {
                              dt.ajax.reload();
                          },
                          className: "btn-sm"
                     },
                  ],
                 responsive: true,
                 ajax:"/task_mgm/taskinfo_all_data",
                 "columnDefs": [
                     {
                         "targets": [ 0 ],
                         "width": "10%",
                     },
                     {
                         "targets": [ 1 ],
                         "sorting": false,
                         "render": function (data, type, full, meta) {
                             // return '<a href="/task_mgm/task" >'+ data +'</a>'
                             AA = function js_method() {
                                 $.get("/task_mgm/taskinfo_comment")
                             };
                             return '<a href="javascript:void(0);" onclick="AA()">'+ data +'</a>'
                         }

                     },
                     {
                         "targets": [ 2 ],
                         "width": "15%",
                     },
                     {
                         "targets": [ 3 ],
                         "data": null,
                         "width": "10%",
                         "sorting": false,
                         "defaultContent": "<i class=\"fa fa-edit\" id=\"edit\">编辑</i>",
                         // "render": function (data, type, row, meta) {
                         //     if([row[4] == "0"]){
                         //         return  "<i class=\"fa fa-edit\" id=\"edit\">编辑</i>";
                         //     }
                         // }
                     }],
             });
             // 行编辑
             $("#datatable-buttonss tbody").on("click", "#edit", function () {
                 alert(2222)
             });
 </script>

下面是实现的效果：