$("#divTabBranInfoList").append('<table id="tabInfo" class="table table-striped table-bordered table-hover" width="100%">\n' +
' <thead>\n' +
' <tr>\n' +
' <th width="25%" id="th_branch" >branch</th>\n' +
' <th width="25%" id="th_prevent" >repo</th>\n' +
' <th width="25%" id="th_exemptions">exemption</th>\n' +
' <th width="15%" id="th_action" >action</th>\n' +
' <th width="15%"><input id="checkAll" class="checkAll" type="checkbox" value=""></th>\n' +
' </tr>\n' +
' </thead>\n' +
' <tbody style="font-size: 14px">\n' +
' </tbody>\n' +
' </table>');
$("#tabInfo").DataTable({
"columns": [{"data": "branch"}, {"data": "prevent"}, {"data": "exemptions"}, {"data": "action"}, {"data": "select"}],
"aLengthMenu": [10, 20, 30, 40],
"iDisplayLength": 10,
"aoColumnDefs": [{
"sClass": "text-center",
"targets": [3, 4]
}, {
"bSortable": false,
"aTargets": [3,4]
},{
"render": function (data, type) {
return "<div align='center'><input type='checkbox' onclick = childclick() name='ckb-jobid' value=''" + data + "></div>" ;
},
"aTargets": -1 //最后一列
},
],
"fnDrawCallback": function () {
$(this).find('thead input[type=checkbox]').removeAttr('checked');
},
"ajax": {
type: "POST",
url: "",
data: {
},
error: function () {
alertError("Get Repo Branch List Error!");
},
dataSrc: function (json) {
json.draw = json.data.draw;
json.recordsTotal = json.data.recordsTotal;
json.recordsFiltered = json.data.recordsFiltered;
return json.data;
}
},
});上面是表格相关内容,表格的最后一列以填加checkbox。
1. 点击全选框,对表格内容进行全选
$('#checkAll').on('click', function () {
if (this.checked) {
$(this).attr('checked','checked')
$("input[name='ckb-jobid']").each(function () {
this.checked = true;
});
} else {
$(this).removeAttr('checked')
$("input[name='ckb-jobid']").each(function () {
this.checked = false;
});
}
});
2.点击表格每一行选择,若某行处于没选中状态,全选框不选中
function childclick(){
if ($(this).is(":checked") == false) {
$("#checkAll").prop("checked", false);
}
}版权声明:本文为lyf1126209324原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。