Javascript 数据表Colvis Responsive_Javascript_Jquery_Datatables

Javascript 数据表Colvis Responsive

javascript jquery datatables

Javascript 数据表Colvis Responsive,javascript,jquery,datatables,Javascript,Jquery,Datatables,了解如何将datatables colvis扩展和responsive相结合。搜索过去的版本是不可能的。想知道是否有进展，或者是否有人找到了让他们一起工作的方法。我希望做的是：保持表的响应能力（在不同的窗口大小上收缩和扩展），并能够选择哪些列是可见的。目前，我可以将所需的列隐藏起来，但当更改窗口大小时，所有列都变为可见列，并且响应性会覆盖colvis设置。我找到了实现和更新的解决方案。您必须使用按钮扩展，因为它已失效第一个解决方案是将这两个扩展添加到一起，它可以工作只需将表格宽度设置

了解如何将datatables colvis扩展和responsive相结合。搜索过去的版本是不可能的。想知道是否有进展，或者是否有人找到了让他们一起工作的方法。我希望做的是：保持表的响应能力（在不同的窗口大小上收缩和扩展），并能够选择哪些列是可见的。

目前，我可以将所需的列隐藏起来，但当更改窗口大小时，所有列都变为可见列，并且响应性会覆盖colvis设置。

我找到了实现和更新的解决方案。您必须使用

按钮扩展

，因为它已失效

第一个解决方案是将这两个扩展添加到一起，它可以工作
只需将表格宽度设置为

100%

<table id="example" class="display" cellspacing="0" width="100%">

下一个解决方案：
您必须将

responsive

类添加到标记

表

，并在JavaScript中仅调用

按钮colvis

扩展

<table id="example" class="display responsive nowrap" width="100%">

$(document).ready( function () {
  var table = $('#example').DataTable({
    dom: 'Bfrtpi',
    buttons: [
        'colvis',
        'colvisRestore'
    ],
    columns: [
      null,
      {visible: false}
    ]
  });
});


$（文档）.ready（函数（）{
变量表=$（'#示例'）。数据表({
dom:'Bfrtpi'，
按钮：[
“科尔维斯”，
“colvisRestore”
],
栏目：[
无效的
{可见：假}
]
});
});

很简单-单击按钮后，

Column visibility

尝试更改输出

div

（或您的浏览器窗口）的

width

，然后按窗口宽度隐藏或显示列

我找到了实施和改进的解决方案。

 public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            output.TagName = "table";
            output.Attributes.Add("id", Id);
            output.Attributes.Add("class", "table table-hover table-responsive-md");
            output.Attributes.Add("width", "100%");

            var props = GetItemProperties();
            var include = GetIncludeProperties();

            TableHeadBuilder(output, props, include);
        }

您必须使用

按钮扩展