datatables-cn icon indicating copy to clipboard operation
datatables-cn copied to clipboard

设置fixedColumns,在fixedColumns或fixedColumns前的列配置了排序,则footer出现表格线错位

Open 18024509136 opened this issue 4 years ago • 1 comments

1. 使用DataTables的源(CDN地址、本地源文件)

https://datatables.net/download/#bs-3.3.7/dt-1.10.20/fc-3.3.0

2. DataTables的版本

Included libraries:

  • Bootstrap 3 3.3.7, DataTables 1.10.20, FixedColumns 3.3.0

3. 开发语言、框架(Java/NodeJs/PHP、Vue/Ng2/React/JQuery)

JQuery

4. 使用DataTables的配置信息

// 此处填写格式化代码
initTableColumns: function () {
        var regDateCol = {
            "data": "regDate",
            "title": "注册时间",
            "width": "90px",
            "render": function (data, type, row, meta) {
                if (row.regDate == null) {
                    return "-";
                }
                return row.regDate;
            }
        };
        var sdkChannelNameCol = {
            "data": "sdkChannelName",
            "title": "sdk渠道",
            "width": "180px",
            "render": function (data, type, row, meta) {
                if (row.sdkChannelName == null) {
                    return "-";
                }
                return row.sdkChannelName;
            },
            "orderable": false
        };
        var childGameNameCol = {
            "data": "childGameName",
            "title": "买量游戏名称",
            "width": "250px",
            "render": function (data, type, row, meta) {
                if (row.childGameName == null) {
                    return "-";
                }
                return row.childGameName;
            },
            "orderable": false
        };
        var advChannelCol = {
            "data": "advChannel",
            "title": "广告渠道",
            "width": "100px",
            "render": function (data, type, row, meta) {
                if (row.advChannel == null) {
                    return "-";
                }
                return row.advChannel;
            },
            "orderable": false
        };
        var advSubChannelCol = {
            "data": "advSubChannel",
            "title": "广告子渠道",
            "width": "100px",
            "render": function (data, type, row, meta) {
                if (row.advSubChannel == null) {
                    return "-";
                }
                return row.advSubChannel;
            },
            "orderable": false
        };
        var addRegDeviceAmountCol = {
            "data": "addRegDeviceAmount",
            "width": "110px",
            "title": "新增注册设备数",
            "render": function (data, type, row, meta) {
                if (row.addRegDeviceAmount == null) {
                    return "-";
                }
                return row.addRegDeviceAmount;
            },
            "orderSequence": ["desc", "asc"]
        };
         // this.tableColumns是一个数组
        this.tableColumns.push(regDateCol, sdkChannelNameCol, childGameNameCol, advChannelCol, advSubChannelCol, addRegDeviceAmountCol);

        for (var i = 1; i <= 90; i++) {
            var ltvCol = {
                "data": "ltv",
                "title": i + "留",
                "width": "110px",
                "render": function (data, type, row, meta) {
                    if (typeof (row.ltvInfo) == 'undefined' || row.ltvInfo == null) {
                        return "-";
                    }
                    var ltvLevel = meta.col - 5;
                    var regex = new RegExp(',' + ltvLevel + '\\|(\\d*)');

                    try {
                        var retainAmount = row.ltvInfo.match(regex)[1];
                        var rate = Number((retainAmount / row.addRegDeviceAmount) * 100).toFixed(2);
                        return retainAmount + " | " + rate;
                    } catch (err) {
                        return "-";
                    }
                },
                "orderable": false
            };
            this.tableColumns.push(ltvCol);
        }
    },

    init: function (paramObj) {
        this.tableEle = $("#table").DataTable({
            "destroy": true,
            "serverSide": true,
            "autoWidth": false,
            "ordering": true,
            "order": [[5, "desc"]],
            "stateSave": false,
            "searching": false,
            "scrollX": true,
            "scrollY": "500px",
            "scrollCollapse": true,
            "fixedHeader": true,
            "oLanguage": { //国际化配置
                "sProcessing": "正在获取数据,请稍后...",
                "sLengthMenu": "显示 _MENU_ 条",
                "sZeroRecords": "没有您要搜索的内容",
                "sInfo": "从 _START_ 到  _END_ 条记录 总显示记录数为 _TOTAL_ 条",
                "sInfoEmpty": "记录数为0",
                "sInfoFiltered": "(共显示 _MAX_ 条数据)",
                "sInfoPostFix": "",
                "sSearch": "搜索:",
                "oPaginate": {
                    "sFirst": "第一页",
                    "sPrevious": "上一页",
                    "sNext": "下一页",
                    "sLast": "最后一页"
                }
            },
            "fixedColumns": {
                "leftColumns": 6
            },
            "ajax": {
                "url": ctxPath + '/user-login/retain-ltv/table',
                "type": 'POST',
                "data": {
                    startDate: paramObj.startDate,
                    endDate: paramObj.endDate,
                    channelNo: paramObj.channelNo,
                    appId: paramObj.appId,
                    childGameIdsStr: JSON.stringify(paramObj.childGameIds),
                    advChannel: paramObj.advChannel,
                    advSubChannelsStr: JSON.stringify(paramObj.advSubChannels),
                    creator: paramObj.creator,
                    dimension: paramObj.dimension,
                    advReleaseFilter: paramObj.advReleaseFilter
                }
            },
            "columns": this.tableColumns
        });

        /**
         * 表格重绘完成后取消遮罩层
         */
        this.tableEle.on("draw", function () {
            $("body").mLoading("hide");
        });
    }

5. 错误信息或截图

6. 其他你认为可以帮助解决问题的信息

貌似是排序的图标把表头和内容的宽度撑开了,但是footer的列宽还是取没有被撑开前的宽度

18024509136 avatar Apr 28 '20 12:04 18024509136

这插件的问题太多了,建议不要用

dxtbrave avatar Apr 11 '24 06:04 dxtbrave