0
我在apsx页面中有一个单选按钮列表，并希望根据单选按钮选择显示/隐藏jQuery数据表中的列。在aspx页面中有条件地显示/隐藏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的建议如下图所示，虽然我不知道如果我理解正确的亚历克斯，如果我这样做正确。我想不会becuasee“调试”我把剧本从来没有被击中：
$(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' **。 –