數據表 Colvis 響應

Question

尋找如何結合數據表 colvis 擴展和響應。 在過去的版本中搜索這是不可能的。 想知道是否有進展，或者是否有人找到了讓他們一起工作的方法。 我想要做的是：保持表格的響應能力（在不同的窗口大小上縮小和擴展）並能夠選擇哪些列是可見的。 現在我可以隱藏所需的列，但是當更改窗口大小時，所有列都變得可見並且響應覆蓋 colvis 設置。

Answer 1

我找到了使用 Column 可見性和Responsive extension來實現Buttons 擴展的解決方案。 您必須使用Buttons extension ，因為Colvis已退休。

第一個解決方案是將兩個擴展添加在一起，它有效。 鏈接。
只有您需要將表格的寬度設置為100% 。

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

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

下一個解決方案： 鏈接
您必須將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}
    ]
  });
});

測試很簡單-點擊按鈕后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);
        }

使用output.Attributes.Add("width", "100%"); 在表格視圖 html 中。 無需在腳本中使用responsive 。 上面的例子展示了如何使用 TagHelper。