还是dataTable全选单选...

效果:


效果图

前面的小方块是框架自带的效果。
首先在html中绑定一个selectAll()点击事件。

table style="width:100%;" class="table table-bordered table-striped table-hover js-basic-example dataTable">
    <thead>
        <tr>
            <th class='select-checkbox' onclick="selectAll()">  
            <input type="checkbox" id="checkSelect" /> 
            </th>
            <th>编号</th>
            <th>品牌</th>
            <th>区域</th>
            <th>位置信息</th>
            <th>IP</th>
            <th>端口</th>
            <th>操作</th>
            </tr>
    </thead>
</table>

js部分:

var table;
var selectAllFlag = true;
var pageFlag = false;
function selectAll(){
    $("input[type='checkbox']").prop("checked",selectAllFlag);
    selectAllFlag = !selectAllFlag;
}
function deleteSelect() {
    $('#deleteSelect').click(
                    function() {
                        var array = new Array();
                        var length=$("input:checkbox[name=id]:checked").length;
                        $("input:checkbox[name=id]:checked").each(function(){
                            array.push($(this).val())
                        });
                        if (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++) {
                                            deleteCallback(array[i])
                                        }
                                    });
                        }
                    })
}
function buildTableConfigJson(operateCell) {
    var configJson = {
        "searching" : false,
        "lengthChange" : false,
        "pageLength" : 10,
        ordering : false,
        "serverSide" : true,
        select : {
            style : 'multi',
            selector : 'td:first-child'
        },
        language : {
            "lengthMenu" : "_MENU 条记录每页",
            "zeroRecords" : "没有找到记录",
            "info" : "记录数:_TOTAL_",
            "infoEmpty" : "无记录",
            "infoFiltered" : "(从 _MAX_ )条记录过滤",
            "paginate" : {
                "previous" : "上一页",
                "next" : "下一页"
            }
        },
        ajax : {
            dataSrc : 'data',
            complete : function() {
                if (!pageFlag) {
                    table.page('previous').draw('page');
                }
            }
        },
        drawCallback : function(settings) {
            if (table.page() > 0 && table.data().length == 0) {
                pageFlag = false;
            } else {
                pageFlag = true;
            }
        },
        columnDefs: [
            {
                orderable : false,
                className : 'select-checkbox',
                targets : 0,
                render : function(data, type, row) {
                    return '<input class="checkchild" type="checkbox" name="id" value="'+row.id+'"/>';
                }
            },
            {
                targets : -1,
                render : operateCell,
            }
        ]
    };
    return configJson;
}

注意点:

render : function(data, type, row) {
return '<input class="checkchild" type="checkbox" name="id" value="'+row.id+'"/>';
                }

如果不加value取出来的值只有一个on,所以通过row.id把行数的id带过去。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容