dataTable实现全选以及批量操作

一、问题描述以及解决思路

参考案例：dataTable如何添加多选、全选
使用jquery.dataTable的插件实现了表格，需要对表格进行批量操作，具体需求如图：
点击全选按钮实现全部选中，再点击批量处理进行处理逻辑操作（也可以进行批量删除）

解决思路：

1. 引用jquery的dataTable的相关插件， 具体可参考官网：dataTable.select_demo
   参考插件有：

• jquery.dataTables.min.css
• select.dataTables.min.css
• jquery.js
• jquery.dataTables.min.js
• dataTables.select.min.js
  2.在表格外部定义两个按钮，通过定义两个按钮的点击事件对表格进行操作。

二、具体实现

1.引用上面的插件

    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" />
	<link rel="stylesheet" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css" />
	<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
	<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>	
	<script src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>

2.页面上写上两个按钮：

<button id="select_All" class="btn btn-danger  btn-group-lg" style="width:80px;">全选</button>
&nbsp;&nbsp;<button class="btn btn-danger btn-group-lg" id="handle_Select">批量处理</button>

页面上的table：

<table class="table datatable-default"  id="gz_preWarning" width="100%">
										<colgroup>
											<col style="width:3%;">
											<col style="width:12%;">
											<col style="width:10%;">
											<col style="width:12%;">
											<col style="width:5%;">
											<col style="width:5%;">
											<col style="width:20%;">
											<col style="width:10%;">
										</colgroup>
										<thead>
											<tr>
												<th><div class="checkbox-custom checkbox-default"><input type="checkbox" class="checkall" /></div></th>
												<th>变电站</th>
												<th>开关室</th>
												<th>机器名称</th>
												<th>排</th>
												<th>列</th>
												<th>产生时间</th>
												<th>危险等级</th>
											</tr>
										</thead>
									</table>

3.写js文件：

$(function() {
    var flag = 1;
    searchFlag = false;
    var  table1 = $("#gz_preWarning") .DataTable({
        "cache": true,
		"select": true,
		"ajax": {
			type: "get",
			crossDomain: true,
			dataSrc:"result",
			async: true,
			contentType: "application/json",
			url: "../assets/ajax/gz_preWarning.json"
		},
		"order": [6, 'desc'],
		"columns": [
			{"data": null},
			{ "data": "bdz_code" },
			{ "data": "gm_sr_id" },
			{ "data": "gz_code" },
			{ "data": "gz_row" },
			{ "data": "gz_cloumn" },
			{ "data": "gm_time" },
			{ "data": "data_level" }],
		columnDefs: [
			{//这个就是用来画第一列的小方块多选框的
			orderable: false,
			className: 'select-checkbox',
			targets: 0
			},
			{
				targets: 0,//代表第0行
				searchable: false,
				orderable: false,
				className: 'dt-body-center',
				render: function (data, type, row) {
					return '<input class="checkchild" disabled style="width:28px"/>';
				}
			},
			{
			"targets": 1,
			"render": function (data, type, full, meta) {
				if (data.length > 5) {
					return "<a  style='color: black' title='" + data + "' href='#' style='text-decoration: none;'>" + data.trim().substr(0, 5) + "..." + "</a>";
				} else {
					return data;
				}
			}
		},
			{
				"targets": 4,
				"data": null,
				"render": function (data, type, row, meta) {
					//alert(data)
					return data+'排'
				}

			}, {
				"targets": 5,
				"data": null,
				"render": function (data, type, row, meta) {
					//alert(data)
					return data + '列'
				}

			},
			{
				"targets": -1,
				"render": function (data, type, full, meta) {
					if (data == 3) {
						return "预警";
					} else if (data == 2){
						return "关注";
					}else {
						return "正常";
					}
				}
			}
		],
		select: {
			style: 'multi',
			selector: 'td:first-child'
		},
		 language : {
                            "lengthMenu" : "_MENU_ 条记录每页",
                            "zeroRecords" : "没有找到记录",
                            "info" : "记录数：_TOTAL_",
                            "infoEmpty" : "无记录",
                            "infoFiltered" : "（从 _MAX_ ）条记录过滤",
                            "paginate" : {
                                "previous" : "上一页",
                                "next" : "下一页"
                            }
         },
		error: "遇到了错误，请检查数据库是否正常"

	})
  $('#handle_Select').click(function () {//处理
	var array = new Array();
	console.log(table1.rows({selected: true }))
	array = table1.rows({ selected: true }).data().toArray();
	if (array.length == 0) {//如果一个没有勾选
		swal({    //提示框
			title: "批量处理失败",
			text: "请先勾选需要处理的数据",
			type: "error",
			showConfirmButton: false,
			timer: 2000
		});
	} else {
		swal({
			title: "处理预警信息",
			text: "<span style='color:#F44336;'>处理后改预警信息恢复正常</span>",
			type: "info",
			showCancelButton: true,
			confirmButtonColor: "#2196F3",
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			closeOnConfirm: false,
			html: true
		}, function () {
			for (var i = 0; i < array.length; i++) {
				//写处理逻辑的函数
			}
		});
	}
})
$('#select_All').click(function () {//全选
	console.log(table1.rows().select().data().toArray())
	flag++;
	console.log(flag)
	if (flag % 2 == 0) {
		table1.rows().select().data().toArray();
	} else {
		table1.rows().deselect();
	}

})
});

如果效果跟我上图有差别，那可能是里边的一些样式。我修改了部分的样式。json可以自己定义，对照起来就可以。