關於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": "<img src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511524485514&di=7914d6ce1d41cf99f546d04b0c6c3133&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01e423569d041532f875520fd65760.gif'/>", //這裏是給服務器發請求後到等待時間顯示的 加載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 = '<input class="checkchild" οnclick="selectList(this)" value=\"'+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 = '<div class="tableBtns">' +
'<a class="tableBtn" href="javaScript:;">查看</a>' +
'<a class="tableBtn" href="javaScript:;">編輯</a>' +
'<a class="tableBtn" href="javaScript:;">日誌</a>'
'</div>';
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)
})
}
}