data tables checkbox实现

1、前端代码

在这里 <table id="project_list" class="table table-bordered table-striped" width="100%" >
                                <thead>
                                <tr>
                                    <th width="5%"><input type="checkbox" name="allChecked" id="allChecked" />全选</th>
                                    <th name="id" style="display: none" >ID</th>
                                    <th name="projectName" >项目</th>
                                    <th name="sourceName" >终端</th>
                                    <th name="remark" >备注</th>
                                    <th name="updatedBy" >操作人</th>
                                    <th name="updatedOn" >操作时间</th>
                                    <th name="isValid" >状态</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody></tbody>
                                <tfoot></tfoot>
                            </table>插入代码片

每行前的复选框

var projectTable = $("#project_list").dataTable({
        "deferRender": true,
        "processing": true,
        "serverSide": true,
        "ajax": {
            url: base_url + "/project/pageList",
            type: "post",
            data: function (d) {

                var obj = {};
                obj.start = d.start;
                obj.length = d.length;
                obj.projectCode = $('#projectCode').val();
                return obj;
            }
        },
        "searching": false,
        "ordering": false,
        //"scrollX": true,	// scroll x，close self-adaption
        "columns": [
            //复选框（通过render渲染复选框）
            {
                "data": 'id',
                "bSortable": false,
                render: function (data, type, full, meta) {
                    return '<input type="checkbox" value="'+ data + '" name="id"/>';
                }
            },
            {
                "data": 'id',
                "bSortable": false,
                "visible": false 	// 如果id需要显示出来，此处改成true

            },
            {
                "data": 'projectName',
                "visible": true
            },
        ],
        "language": {
            "sProcessing": '处理中...',
            "sLengthMenu": '每页 _MENU_ 条记录',
            "sZeroRecords": '没有匹配结果',
            "sInfo": '第 _PAGE_ 页 ( 总共 _PAGES_ 页，_TOTAL_ 条记录 )',
            "sInfoEmpty": '无记录',
            "sInfoFiltered": '(由 _MAX_ 项结果过滤)',
            "sInfoPostFix": "",
            "sSearch": '搜索',
            "sUrl": "",
            "sEmptyTable": '表中数据为空',
            "sLoadingRecords": '载入中...',
            "sInfoThousands": ",",
            "oPaginate": {
                "sFirst": '首页',
                "sPrevious": '上页',
                "sNext": '下页',
                "sLast": '末页'
            },
            "oAria": {
                "sSortAscending": ': 以升序排列此列',
                "sSortDescending": ': 以降序排列此列'
            }
        }
    });

js代码：

 /* 全选*/
    $('#allChecked').change(function () {
        if ($('#allChecked').is(':checked')) {
            $("#project_list [type='checkbox']").prop("checked","checked");
        } else {
            $("#project_list [type='checkbox']").prop("checked","");
        }
    });


    $(".copyOne").click(function () {
        var ids = [];
        var copyProjectCode=$('#copyProjectCode').val();
        if(copyProjectCode=='')
        {
            layer.open({
                title: '系统提示',
                btn: ['确定'],
                content: '不能选择复制全部，请选择一个目标复制项目',
                icon: '1',
                end: function (layero, index) {
                    /*if (needFresh) {
                        //window.location.reload();
                        projectTable.fnDraw(false);
                    }*/
                }
            });
            return;
        }
        $("#project_list [type='checkbox']:checked").each(function () {
            if ($(this).val())
                ids.push($(this).val());
        });
        if (ids.length <=0) {
            alert("请先选择数据");
            return;

        }

        layer.confirm('确定复制', {
            icon: 3,
            title: '系统提示',
            btn: ['确定', '取消']
        }, function (index) {
            layer.close(index);
            url = base_url + "/project/project.merchant/copyOne";
            $.ajax({
                type: 'POST',
                url: url,
                data: {
                    "ids": JSON.stringify(ids),
                    "copyProjectCode": copyProjectCode
                },
                success: function (data) {
                    if (data.code == "200") {
                        layer.open({
                            title: '系统提示',
                            btn: ['确定'],
                            content: '拷贝成功',
                            icon: '1',
                            end: function (layero, index) {
                                projectTable.fnDraw();
                                //window.location.reload();
                            }
                        });
                    }
                    else{
                        layer.open({
                            title: '系统提示',
                            btn: ['确定'],
                            content: '拷贝失败:'+data.msg,
                            icon: '1',
                            end: function (layero, index) {
                                projectTable.fnDraw();
                                //window.location.reload();
                            }
                        });
                    }
                }
            });
        });
    });

2、后端代码 ：

 @RequestMapping("/copyOne")
    @ResponseBody
    public AjaxReturnT<String> copyOne(HttpServletRequest request,
                                   String ids, String copyProjectCode) {
        try{
            ids = StringEscapeUtils.unescapeHtml(ids);
            ids = ids .substring(1, ids.length()-1);
            ids = ids .replaceAll("\"", "");
            List<String> idList = Arrays.asList(ids.split(","));

            // 默认为无效状态
            if(CollectionUtils.isEmpty(idList)
                    ||StringUtils.isEmpty(copyProjectCode)){
                return new AjaxReturnT(AjaxReturnT.FAIL_CODE, "参数传递有误");
            }
            this.service.copyProjectCodeOne(idList, copyProjectCode);
            return AjaxReturnT.SUCCESS;
        }
        catch(Exception ce){
            logger.error("复制出现错误",ce);
            return new AjaxReturnT(AjaxReturnT.FAIL_CODE, ce.getMessage());
        }
    }