gpt4 book ai didi

javascript - 如何限制jquery数据表字段在MVC View 中显示所有列

转载 作者:行者123 更新时间:2023-12-03 08:16:16 26 4
gpt4 key购买 nike

我在此链接中使用 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>

最佳答案

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

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

引用:

Hidden Columns

关于javascript - 如何限制jquery数据表字段在MVC View 中显示所有列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33925094/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com