dataTables——实现表单复选框全选/全不选/反选功能

1、html内容

<table id="carousel_figure_table" class="table table-striped table-bordered" style="width:100%">
	<thead>
		<tr>
			<th><input type="checkbox" id="customCheck" class="checkAll">
                <label for="customCheck" class="text-center"></label></th>
			<th>ID</th>
			<th>名称</th>
			<th>编号</th>
			<th>原料</th>
			<th>生产日期</th>
			<th>保质期</th>
			<th>图片</th>
			<th>进价</th>
			<th>售价</th>
			<th>规格</th>
			<th>净容量</th>
			<th>操作</th>
		</tr>
	</thead>
	 <tbody>

	</tbody>
</table>

2、js生成datatables表单

$(document).ready(function () {
    $.getJSON("/static/plugins/datatable/datatables_language.json",function(language_data){
        var table = $('#carousel_figure_table').DataTable({
            language:language_data,
            ajax:{
                url:'/product/getProductData',
                dataSrc:'data'
            },
            columns:[
				// 第一列放置复选框
                {   "data": null,
                    "render": function (data, type, row) {
                        return data = '<input type="checkbox" class="checkOne" id="check_item_'+row.product_id+'">' +
                            '<label for="check_item_'+row.product_id+'" id="checklabel1"></label>';
                        },
                    "sClass":"text-center"},
                { "data": 'product_id',"sClass":"text-center"},
                { "data": 'product_name',"sClass":"text-center" },
                { "data": 'product_code',"sClass":"text-center" },
                { "data": 'product_raw_material',"sClass":"text-center" },
                { "data": 'product_pd',"sClass":"text-center" },
                { "data": 'product_exp',"sClass":"text-center" },
                { "data": 'product_pic',"sClass":"text-center"},
                { "data": 'product_purchase_price',"sClass":"text-center" },
                { "data": 'product_sole_price',"sClass":"text-center" },
                { "data": 'product_specification',"sClass":"text-center" },
                { "data": 'product_net_capacity',"sClass":"text-center"},
				// 最后一列放置操作按钮，比如删除按钮、编辑按钮
                {
                    "data": null,
                    "render": function (data,type,row) {
                        return data = '<div class="btn-group m-1" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary"><i class="bx bx-detail"></i>' +
                            '</button><button type="button" class="btn btn-outline-primary"><i class="bx bx-edit"></i></button>' +
                            '<button type="button" class="btn btn-outline-primary"><i class="bx bx-trash"></i></button></div>';
                    },
                    "sClass":"text-center"
                }
            ],
            dom:'<"row"<"col-sm-6"B><"col-sm-6"f>>' +
                '<"row"<"col-sm-12"t>>' +
                '<"row"<"col-sm-5"i><"col-sm-7"p>>',
            iDisplayLength : 5,// 每页显示行数
            ordering: false,//全局禁用排序
        });
    });

});

3、完成复选框全选/全不选的功能

$(document).on("click", ".checkAll", function () {
    //prop是修改和读取dom原始属性的值
    // alert($(this).prop("checked"));   //$(this).prop("checked") 返回值为true和false
    $(".checkOne").prop("checked",$(this).prop("checked"));
});

4、为每一个选择绑定事件，若单选选项全选上时，全选按钮也全选上

$(document).on("click",".checkOne",function(){
    //$("#check_all").prop("checked");
    //alert($(".check_item:checked").length);   //$(".check_item").length
    //被选中的个数是否等于所有单选框的个数
    var flag=$(".checkOne:checked").length==$(".checkOne").length;
    $(".checkAll").prop("checked",flag);
});