DataTable如何添加多选，全选

官方文档：https://datatables.net/extensions/select/examples/api/select.html

一、首先展示效果图

效果图

开始之前先导包！

<link rel="stylesheet" type="text/css" href="${request.contextPath}/library/datatables/dataTables.select.min.css"/>
<script type="text/javascript" src="${request.contextPath}/library/datatables/dataTables.select.min.js"></script>

• https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js
• https://cdn.datatables.net/select/1.2.7/js/dataTables.select.min.js
  链接在这，如果没有js包的话，自己建一个文件夹，然后把链接内的东西复制过去

第一步：先写html

//在你需要添加按钮的地方加上这两个按钮
<button type="button" class="btn btn-danger waves-effect" id="deleteAll" style="width:80px;margin-right:10px">全选</button>
<button type="button" class="btn btn-danger waves-effect" id="deleteSelect">批量删除</button>

<table class="table table-bordered table-striped table-hover dataTable" id="example"  style="width: 100%">
<thead>
  <tr>
    <th class='th'><input type="checkbox" class="checkall" /></th>//这行就是留位置，下面的根据各自项目需要添加
    <th>编号</th>
    <th>区域</th>
    <th>位置</th>
    <th>类型</th>
    <th>关联</th>
    <th>操作</th>
</tr>
</thead>

第二步：写js文件

$(function() {
    searchFlag = false;
    table = $(".dataTable")
            .DataTable(
                    {
                        "searching" : false,
                        "lengthChange" : false,
                        "pageLength" : 10,
                        ordering : false,
                        "serverSide" : true,
                        ajax : {
                            url : contextPath + '/mapPoint/list',
                            dataSrc : 'data',
                            data : function(data) {
                                if (searchFlag) {
                                    buildSearchParameters(data);
                                }
                            }
                        },
                        columns : [ {
                            "data" : null
                        }, {
                            "data" : "id"
                        }, {
                            "data" : "region"
                        }, {
                            "data" : "position"
                        }, {
                            "data" : "type"
                        }, {
                            "data" : "relationName"
                        }, {
                            "data" : null
                        } ],
                        columnDefs : [
                                {//这个就是用来画第一列的小方块多选框的
                                    orderable : false,
                                    className : 'select-checkbox',
                                    targets : 0
                                },
                                {
                                    targets : -1,
                                    render : function(data, type, row, meta) {
                                        var html = '<button class="btn btn-sm btn-primary waves-effect" value="'
                                                + row.id
                                                + '" onclick="updateMapPoint('
                                                + row.id
                                                + ')">编辑</button>&nbsp;&nbsp;&nbsp;'
                                                ;
                                        return html;
                                    }
                                },
                                {
                                    targets : 0,//代表第0行
                                    searchable : false,
                                    orderable : false,
                                    className : 'dt-body-center',
                                    render : function(data, type, row) {
                                        return '<input class="checkchild" type="checkbox"/>';
                                    }
                                } ],
                        select : {
                            style : 'multi',
                            selector : 'td:first-child'
                        },
                        language : {
                            "lengthMenu" : "_MENU 条记录每页",
                            "zeroRecords" : "没有找到记录",
                            "info" : "记录数：_TOTAL_",
                            "infoEmpty" : "无记录",
                            "infoFiltered" : "（从 _MAX_ ）条记录过滤",
                            "paginate" : {
                                "previous" : "上一页",
                                "next" : "下一页"
                            }
                        }
                    })
    $('#deleteSelect').click(function() {//删除
        var array = new Array();
        array = table.rows({selected : true}).data().toArray();
        if(array.length==0){//如果一个没有勾选
            swal({    //提示框
                title : "批量删除失败",
                text : "请先勾选需要删除的数据",
                type : "error",
                showConfirmButton : false,
                timer : 2000
            });
        }else{
        swal({
            title : "删除账号",
            text : "<span style='color:#F44336;'>删除操作后该记录将被删除，并且无法恢复</span>",
            type : "info",
            showCancelButton : true,
            confirmButtonColor : "#2196F3",
            confirmButtonText : "确定",
            cancelButtonText : "取消",
            closeOnConfirm : false,
            html : true
        }, function() {
            for (var i = 0; i < array.length; i++) {
                deleteMapPoint(array[i].id)//确定删除，则执行删除函数
            }
        });
        }
    })
    $('#deleteAll').click(function() {//全选
            flag++;
            if(flag%2==0){
                table.rows().select().data().toArray();
            }else{
                 table.rows().deselect();
                 }
    
    })
});

第三步：写js文件中的deleteMapPoint函数

function deleteMapPoint(id) {
    $.ajax({
        url : contextPath + "/mapPoint/delete/" + id,
        cache : false,
        dataType : "json",
        success : function(result) {
            if (result.code == 1) {
                swal({
                    title : "删除账号",
                    text : "删除账号成功",
                    type : "success",
                    showConfirmButton : false,
                    timer : 1000
                });
                table.ajax.reload();
            }
        }
    });
}

应该没啦。完工~