0
라디오 버튼 목록을 apsx 페이지에두고 라디오 버튼 선택에 따라 jQuery 데이터 테이블의 열을 표시하거나 숨기려고합니다.aspx 페이지에서 jquery datatable 열을 조건부로 표시/숨기기
나는 그럭저럭 할 수 있었지만 라디오 버튼 선택에 기반한 데이터 테이블에 데이터를 채우고 열 가시성을 만지지는 못했지만 느려졌다.
이(라디오 버튼리스트를 가정하면, 선택, 플러스 "모든으로"옵션 3 "와"옵션 4 "를"옵션 2 "를"옵션 1 "을 포함
이
내가 무엇을 내가 시도 것입니다 ").<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>
자바 스크립트 코드 :
<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;
}
}
업데이트
는 내가 확실하지 오전하지만 나는 알렉스를 제대로 이해하면, 아래와 같은 알렉스의 제안을 채택하고 생각하면 그 일을 바르게. 내가 "디버거"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' ** ** –