datatables实现复选框全选反选！！（亲测有效）
关于datatables的全选和反选实现
html部分：
<table data-toggle="table" class="table table-bordered text-center table-hover" id="customTable">
<thead>
<tr class="tr1">
<th class='th'>
<input type="checkbox" class="checkall" />
th>
<th>员工工号th>
<th>姓名th>
<th>登录账号th>
<th>手机号th>
<th>部门th>
<th>状态th>
<th>操作th>
tr>
thead>
<tbody>
tbody>
table>
js部分：
var app = new Vue({
el:'#app',
data:{
loginId:localStorage.loginId,
token:localStorage.token,
idList:[], //选中的value值即id插入到一个数组中
// allIdList:[], //点击全选获取到的id
checkedData:'',//选中的每个复选框value值
},
/**
* 页面加载完成要做的事
* */
mounted: function () {
this.showCustomList();
},
methods: {
/**
* 页面初始化做的事儿
* */
showCustomList:function() {
var that = this;
$('#customTable').DataTable({
bLengthChange: false, //去掉每页显示多少条数据方法
"info": false, //去掉底部文字
"lengthMenu": [[10, 30, 50, 100], [10, 30, 50, 100]], //分页长度选项, -1 "全部" 暂时取消
"paging": true, //分页
"ordering": false, //排序
"bSort": false, //排序
"bFilter": true, //过滤功能
"order": [], //[[ 1, "desc" ]]默认排序 第三列
iDisplayLength: 10,
destroy: true, //如果需要重新加载的时候请加上这个
"pagingType": "full_numbers", //分页样式
"bStateSave": true, //当前页码缓存
"bDeferRender": true, // * 当该属性设置为true时，表格每一行新增的元素只有在需要被画出来时才会被DataTable创建出来
//"scrollY": "auto", //设置高度
//"scrollCollapse": true, //超出 滑动
"bJQueryUI": true, // 是否启用jQueryUI样式
bProcessing: false, //加载动画
"bServerSide": true, //服务端分页
// "aaSorting": [[4, "desc"]],
searching: false, //禁用原生搜索
"language": {
//语言配置
"sSearch": "搜索",
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "没有检索到数据",
"sInfo": "第 _START_ 至 _END_ 条数据 共 _TOTAL_ 条",
"sInfoEmpty": "没有数据",
"sProcessing": "
", //这里是给服务器发请求后到等待时间显示的 加载gif
"sInfoFiltered": "(筛选自 _MAX_ 条数据)",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "前一页",
"sNext": "后一页",
"sLast": "末页"
}
},
//"info": true, //通知
ajax: function (data, callback, settings) {
var param = {
};
//如果需要分页（后端分页）
param.pageSize = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
param.startRow = data.start;//开始的记录序号
param.pageNum = (data.start / data.length)+1;//当前页码
//ajax请求数据
$.ajax({
url:"", //接口
type:'post',
dataType:'json',
data:param,
success:function (res) {
checkToken(res);
if(res.code == 200){
// console.log(res)
$(".checkall").prop("checked", false); //每次翻页全选框不选中
// console.log(res)
that.pageNum = res.data.pageInfo.size; //每页显示的数据
var returnData = {
};
returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
returnData.recordsTotal = res.data.pageInfo.total;//返回数据全部记录
returnData.recordsFiltered = res.data.pageInfo.total;//后台不实现过滤功能，每次查询均视作全部结果
returnData.data = res.data.pageInfo.list;//返回的数据列表
callback(returnData);
}else{
layer.msg(res.msg);
}
}
});
},
columns: [
//复选框（通过render渲染复选框）
{
"data": null,
"bSortable": false,
render: function (data, type, full, meta) {
var node = '';
node = '+full.id+'\" type="checkbox"/>';
return node;
}
},
//员工工号
{
"data": "empCode",
"bSortable": false
},
//姓名
{
"data": "userName",
"bSortable": false
},
//登录账号
{
"data": "loginId",
"bSortable": false
},
//手机号
{
"data": "phoneNum",
"bSortable": false
},
//部门
{
"data": "groupName",
"bSortable": false
},
//状态
{
"data": "useSign",
"bSortable": false,
},
//操作
{
"data": "",
"bSortable": false,
"render": function (data, type, full, meta) {
var node = '';
node = '';
return node;
}
}
],
});
//点击全选按钮
$('.checkall').on('click', function () {
//我的需求是要把全选选中的相关内容的id以数组的形式传给后端。在点击全选之前先初始化一下数组
that.idList=[]
//如果全选框时选中状态
if($(this).prop('checked')) {
//则它下面的复选框为选中状态
$(".checkchild").prop("checked", true);
//声明选中的复选框，并遍历
var allChecked = $('.checkchild:checked');
for(var i= 0;i<allChecked.length;i++){
//因为传给后端的数据id具有唯一性，所以只要保证数组不重复，
//就可以保证在先点击其下复选框再点击全选按钮的时候id被重复添加进数组中的问题
if(that.idList.indexOf($(allChecked[i]).val())==-1){
that.idList.push($(allChecked[i]).val())
}
}
console.log(that.idList)
} else {
//如果全选框为非选中状态时，其下的复选框全部变为非选中状态
$(".checkchild").prop("checked", false);
//并把原数组清空
that.idList=[]
}
});
},
}
});
每个复选框的点击事件：
function selectList(_this) {
app.checkedData = $($(_this)[0]).val();
if($($(_this)[0]).prop('checked')){
if(app.idList.indexOf(app.checkedData)==-1){
app.idList.push(app.checkedData)
console.log(app.idList)
if($('.checkchild:checked').length===app.pageNum){
//如果单个复选框全部选中，全选框也选中
$(".checkall").prop("checked", true);
}
}
}else {
$(".checkall").prop("checked", false);
app.idList.map((item,index)=>{
if(item == app.checkedData){
app.idList.splice(index,1)
}
console.log(app.idList)
})
}
}