Question

了解如何结合数据表colvis扩展和响应。在过去的版本中搜索它是不可能的。想知道是否有进展或者是否有人找到了让他们一起工作的方法。我要做的是：保持表的响应能力（缩小和扩展不同的窗口大小），并能够选择哪些列可见。现在我可以隐藏所需的列，但是当更改窗口大小时，所有列都变得可见并且响应会覆盖colvis设置。

Answer 1

我找到了实施Buttons extension with Column visibility和Responsive extension的解决方案。您必须使用Buttons extension，因为Colvis已停用。

第一个解决方案是将两个扩展名一起添加，它可以工作。 Link。
只需要将表格的宽度设置为100%。

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

$('#example').DataTable( {
    dom: 'Bfrtip',
    buttons: [
        'colvis'
    ],
    responsive: true
} );

下一个解决方案：Link
您必须添加responsive个类来标记table，并在JavaScript中仅调用Buttons 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}
    ]
  });
});

Testing很简单 - 点击按钮Column visibility后，尝试更改输出width（或浏览器窗口）的div，并按窗口宽度隐藏或显示列。

Answer 2

 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);
        }

在表格视图html中使用output.Attributes.Add("width", "100%");。无需在脚本旁边使用responsive。上面的示例显示了如何使用TagHelper。

DataTables Colvis响应

2 个答案: