美文网首页
还是dataTable全选单选...

还是dataTable全选单选...

作者: 欧_汤姆 | 来源:发表于2019-03-08 09:23 被阅读0次

    效果:


    效果图

    前面的小方块是框架自带的效果。
    首先在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带过去。

    相关文章

      网友评论

          本文标题:还是dataTable全选单选...

          本文链接:https://www.haomeiwen.com/subject/ozslpqtx.html