<table id="mytable" class="table table-striped table-bordered" width="100%">
<thead>
<tr>
<th>序号</th>
<th>
<input type="checkbox" class="checkall" />
</th>
</tr>
</thead>
<tbody></tbody>
</table>
$(document).ready(function(){
var table = $("#mytable").DataTable({
"processing":true,
"ajax": {
"url": "user/getTableDatas",
},
"columns": [
{"data":"index",//序号
"render":function(data,type,row,meta){
var startIndex = meta.settings._iDisplayStart;
return startIndex+meta.row+1;
}},
{
"sClass": "text-center",
"data": "id",//行单选框
"render": function (data, type, full, meta) {
return '<input id="checkchild" type="checkbox" class="checkchild" value="' + data + '" />';
},
"bSortable": false
}
],
//行被创建时调用
"createdRow":function(row,data,dataIndex){
}
});
//复选框全选
$(".checkall").click(function () {
var check = $(this).prop("checked");
$(".checkchild").prop("checked", check);
checkButton();
});
//行内的选择框选中
$(document).on("click","#checkchild",function(){
var check = $(this).prop("checked");
if(check && check==true){
$(this).prop("checked",false);
}else{
$(this).prop("checked",true);
}
checkButton();
});
//选中行事件
$("#mytable tbody").on("click","tr",function(){
var check = $(this).find(".checkchild").prop("checked");
if(check && check==true){
$(this).find('.checkchild').prop("checked",false);
}else{
$(this).find('.checkchild').prop("checked",true);
}
checkButton();
});