DataTables的FixedColumns扩展导致列重复

时间:2018-08-24 09:18:14

标签: datatables

我正在使用扩展名为Fixed Columns https://datatables.net/的jQuery插件DataTables https://datatables.net/extensions/fixedcolumns/

这是我的JavaScript代码

var datatable;

        $(document).ready(function () {

            datatable = $('#data-table').DataTable({
                "scrollX": true,
                "scrollCollapse": true,
                "fixedColumns": {
                    "leftColumns": 3,
                    "rightColumns": 1
                },
                stateSave: true,
                "processing": true,
                "serverSide": true,
                "drawCallback": function () {
                    feather.replace();
                    $('[data-toggle="tooltip"]').tooltip();
                },
                "ajax":
                {
                    "url": "@Url.Action("GetDataTableData","General")",
                    "type": "POST"
                    },
                "columnDefs": [
                    {
                        "targets": 33,
                        "data": function (data) { return "<a href=\"#\" onclick=\"edit(" + data[33] + ")\">Edit</a> <a href=\"#\" onclick=\"deleteProject(" + data[33] + ")\"><span color=\"red\" data-feather=\"x\"></span></a>" },
                    }
                ]
            });

        });

因为我有很多列,并且"scrollX"属性设置为true,所以我可以在数据表中看到水平边栏。

这是可能在两种情况下发生的结果

enter image description here

场景1:隐藏列(https://datatables.net/examples/api/show_hide.html

column.visible( ! column.visible() );

最后一个固定的列在不需要水平侧边栏时会重复(因为用户隐藏了大多数列)

方案2:调整引导程序页面的宽度

$("#sidebar").removeClass("sidebar-hidden");

我具有与本示例https://codepen.io/Xeoncross/pen/zxyWeW

中所述类似的隐藏效果

因为我还使用属性"stateSave": true,所以即使刷新页面,重复性仍然存在。

这是怎么回事,如何删除上一个操作列的重复项?

小提琴示例:https://jsfiddle.net/g7tdqm9h/32/

2 个答案:

答案 0 :(得分:0)

尝试一下。它对我有用

var empTable = $('#empList').DataTable( {
  sScrollX: "100%",
  sScrollXInner: "150%"        
});

答案 1 :(得分:0)

我有同样的事情,但是然后我再次检查我是否正在使用DataTables bs4(如果您使用的是同样的东西),所以我发现了主要问题。链接:https://datatables.net/release-datatables/extensions/FixedColumns/examples/styling/bootstrap4.html,我忘了添加CSS,我不知道这是否对您有用,希望对您有所帮助。