如何限制jQuery数据表字段显示MVC视图中的所有列

Question

我在此链接中使用jquery DataTable在MVC中创建网格以显示一些数据并显示和隐藏列。

https://datatables.net/examples/api/show_hide.html

我显示所有的列，然后显示和以什么列用户选择隐藏基地。但我喜欢在网格中显示5列，而不是所有列和用户都能显示/隐藏其余部分。

我不知道该怎么做。

这是我的代码：

这是jQuery代码显示/隐藏列：

$(document).ready(function() { 

     var table = $('#DataLegal').DataTable({ 
      "paging": true 
     }); 
     $('a.toggle-vis').on('click', function (e) { 
         event.preventDefault ? event.preventDefault() : event.returnValue = false; 

      //Get the column API object 
      var column = table.column($(this).attr('data-column')); 

      // Toggle the visibility 
      column.visible(!column.visible()); 

     }); 

     var ms = $('#magicsuggest').magicSuggest({ 
      // Converts our C# object in a JSON string. 
      data: @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(columns)) 
     }); 

     $(ms).on('selectionchange', function(e,m){ 

      // Turn on ALL columns... Like a reset... 
      $.each(table.columns()[0], function(index) { 
       table.column(index).visible(true); 
      }); 

      // Turn off each column in the value array... Value = int[0, 1, 2, ...] 
      $.each(this.getValue(), function(index, item) { 
       table.column(item).visible(false); 
      }); 


     }); 

    }); 

，这是我的网格，正显示出所有列。我喜欢在首秀限制这个只有5列：

//This is when user sees the column name to show/hide 
<div id="content"> 

    <table> 
     <tr> 

     <td> 
      <div id="magicsuggest"></div> 


     </td> 
     <td id="returnS5"></td> 
    </tr> 

    </table> 
    </div> 

//This is the grid that I have all the column and I like to limit it to 5 column 
<br /> 
<table width="100%" class="display" id="DataLegal" cellspacing="0"> 
    <thead> 
     <tr> 
      <th>Entity</th>how hide some column 
      <th>License Type</th> 
      <th>State</th> 
      <th>Location</th> 
      <th>Data User</th> 
      <th>Create Date</th> 
      <th>Modified Date</th> 
      <th>Modified By</th> 
      <th>Status</th> 
      <th>Surrender Effective Date</th> 
      <th>NMLS</th> 
      <th>License Name</th> 
      <th>License Number</th> 
      <th>Issuance Date</th> 
      <th>Expiration Date</th> 
      <th>License Renewal Due Date</th> 
      <th>License Renewal Fee</th> 
      <th>License Renewal Filed Date</th> 
      <th>Annual Report Due Date</th> 
      <th>Annual Report Filed Date</th> 
      <th>Other Filed Date</th> 
      <th>Display</th> 
      <th>Display Comments</th> 
      <th>Regulator</th> 
      <th>Governing Law</th> 
      <th>Regulator Address</th> 
      <th>License Restrictions</th> 
      <th>Additional Notes</th> 


     </tr> 
    </thead> 
    <tbody> 
    @foreach(var item in Model) 
    { 
    <tr> 
    <td>@item.Entity</td> 
    <td>@item.License_Type</td> 
    <td>@item.State</td> 
    <td>@item.Location</td> 
    <td>@item.dataUser</td> 
    <td>@item.Create_Date</td> 
    <td>@item.Modified_Date</td> 
    <td>@item.Modified_By</td> 
    <td>@item.Status</td> 
    <td>@item.Surrender_Effective_Date</td> 
    <td>@item.NMLS</td> 
    <td>@item.License_Name</td> 
    <td>@item.License_Number</td> 
    <td>@item.Issuance_Date</td> 
    <td>@item.Expiration_Date</td> 
    <td>@item.License_Renewal_Due_Date</td> 
    <td>@item.License_Renewal_Fee</td> 
    <td>@item.License_Renewal_Filed_Date</td> 
    <td>@item.Annual_Report_Due_Date</td> 
    <td>@item.Annual_Report_Filed_Date</td> 
    <td>@item.Other_Filed_Date</td> 
    <td>@item.Display</td> 
    <td>@item.Display_Comments</td> 
    <td>@item.Regulator</td> 
    <td>@item.Governing_Law</td> 
    <td>@item.Regulator_Address</td> 
    <td>@item.License_Restrictions</td> 
    <td>@item.Additional_Notes</td> 


    </tr> 

} 
    </tbody> 

</table> 

Answer 1

列的初始可见性是可以在columnDefs属性设置一个初始化选项。例如：

"columnDefs": [ 
     { 
      "targets": [ 2 ], 
      "visible": false, 
      "searchable": false 
     }] 

参考：

Hidden Columns