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

时间:2015-11-25 19:39:31

标签: javascript jquery asp.net-mvc datatables

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

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

我正在显示所有列,然后根据用户选择的列显示和隐藏。但我喜欢在我的网格中开始只显示5列而不是所有列,用户可以显示/隐藏其余列。

我不知道该怎么做。

这是我的代码:

这是显示/隐藏列的jquery代码:

 //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>

这是显示所有列的网格。我想在第一次展示时仅限于5列:

object RecursionTest {

  def sumArrayRec(elems: Array[Int]) = {

    def goFrom(i: Int, size: Int, elms: Array[Int]): Int = {
      if (i < size) elms(i) + goFrom(i + 1, size, elms)
      else 0
    }
    goFrom(0, elems.length, elems)
  }

  def main(args: Array[String]) {
    val recDepth = recurseTest(0, 0, Array(1))
    println("sumArrayRec = " + sumArrayRec((0 until recDepth).toArray))
  }

  def recurseTest(i: Int, j: Int, arr: Array[Int]): Int = {
    try {
      recurseTest(i + 1, j + 1, arr)
    } catch { case e: java.lang.StackOverflowError =>
      println("Recursion depth on this system is " + i + ".")
      i
    }
  }

}

1 个答案:

答案 0 :(得分:1)

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

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

参考:

Hidden Columns