【发布时间】：2017-11-25 23:23:05
【问题描述】：
我在 apsx 页面中有一个单选按钮列表，并希望根据单选按钮选择显示/隐藏 jQuery 数据表中的列。
我设法做到了，但与仅根据单选按钮选择在数据表中填充数据而不触及列的可见性相比，它的速度非常慢。
这就是我所拥有和尝试过的：
（假设单选按钮列表包含“选项 1”、“选项 2”、“选项 3”和“选项 4”作为选项，加上“全部”）。
<asp:RadioButtonList runat="server" ID="rblOptions"
ClientIDMode="Static"
DataSourceID="odsOptionss"
DataTextField="Option"
DataValueField="OptionID"
AutoPostBack="true"
AppendDataBoundItems="true">
<asp:ListItem Text="All" Value="-1" Selected="True" />
</asp:RadioButtonList>
<div runat="server" id="divAll" clientidmode="Static">
<table id="svDataTable" class="table table-striped table-bordered table-hover table-responsive">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
<th>Col5</th>
</tr>
</thead>
<tbody>
<asp:Repeater runat="server" ID="rptTableData">
<ItemTemplate>
<tr>
<td runat="server" id="tdCol1"><%# Eval("Col1Data") %></td>
<td runat="server" id="tdCol2"><%# Eval("Col2Data") %></td>
<td runat="server" id="tdCol3"><%# Eval("Col3Data") %></td>
<td runat="server" id="tdCol4"><%# Eval("Col4Data") %></td>
<td runat="server" id="tdCol5"><%# Eval("Col5Data") %></td>
</tr>
</ItemTemplate>
</asp:Repeater>
</tbody>
</table>
</div>
Javascript 代码：
<script typeof="text/javascript">
$(function () {
bindDataTable(); // bind data table on first page load
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(bindDataTable); // bind data table on every UpdatePanel refresh
});
function bindDataTable() {
var selectedOption = $("#rblOptions input[type=radio]:checked");
var optionId = selectedOption.val();
var option = selectedOption.next().html();
if ($.fn.dataTable.isDataTable('#svDataTable')) {
table = $('#svDataTable').DataTable();
}
else {
table = $('#svDataTable').DataTable({
"bStateSave": true,
"fnStateSave": function (oSettings, oData) {
localStorage.setItem('svDataTable', JSON.stringify(oData));
},
"fnStateLoad": function (oSettings) {
return JSON.parse(localStorage.getItem('svDataTable'));
}
});
}
switch (option) {
case 'All':
break;
case 'Option 1':
table.column(3).visible(false);
table.column(4).visible(false);
table.column(5).visible(false);
break;
case 'Option 2':
table.column(2).visible(false);
table.column(3).visible(false);
break;
case 'Option 3':
break;
case 'Option 4':
table.column(1).visible(false);
table.column(2).visible(false);
break;
}
}
更新
我调整了 Alex 的建议，如下所示，尽管我不确定我是否正确理解了 Alex 以及是否正确执行。我猜不是因为我放入脚本中的“调试器”永远不会被击中。：
$(function () {
bindDataTable(); // bind data table on first page load
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(bindDataTable); // bind data table on every UpdatePanel refresh
});
function bindDataTable() {
if ($.fn.dataTable.isDataTable('#svDataTable')) {
table = $('#svDataTable').DataTable();
}
else {
table = $('#svDataTable').DataTable({
"bStateSave": true,
"fnStateSave": function (oSettings, oData) {
localStorage.setItem('svDataTable', JSON.stringify(oData));
},
"fnStateLoad": function (oSettings) {
return JSON.parse(localStorage.getItem('svDataTable'));
}
});
}
}
$('#rblSysType').on('click', '[type=radio]', function () {
var tbl = $('#svDataTable');
$('td, th', tbl).show();
debugger
var selectedSysType = $("#rblSysType input[type=radio]:checked");
var sysTypeId = selectedSysType.val();
var sysType = selectedSysType.next().html();
switch (sysType) {
case 'Option 2':
case 'Opion 4':
case 'All':
break;
case 'Option 1':
$('tr>*:nth-child(8)', tbl).hide();
$('tr>*:nth-child(9)', tbl).hide();
$('tr>*:nth-child(10)', tbl).hide();
$('tr>*:nth-child(11)', tbl).hide();
$('tr>*:nth-child(12)', tbl).hide();
$('tr>*:nth-child(13)', tbl).hide();
break;
case 'Option 3':
$('tr>*:nth-child(11)', tbl).hide();
$('tr>*:nth-child(12)', tbl).hide();
$('tr>*:nth-child(13)', tbl).hide();
break;
case 'Option 5':
$('tr>*:nth-child(11)', tbl).hide();
$('tr>*:nth-child(12)', tbl).hide();
break;
}
});
【问题讨论】：
-
你的
RadioButtonList有ID="rblOptions而在 JS 中你使用#rblSysType。
标签： jquery asp.net datatables show-hide