DataTable添加checkbox实现表格数据全选,单选(点选)

$("#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版权协议,转载请附上原文出处链接和本声明。