在ASPX页面中有条件地显示/隐藏jQuery DataTable列

Question

我在APSX页面中有一个单选按钮列表，并希望在jQuery数据表中显示/隐藏列，具体取决于单选按钮选择。

我设法做到了，但是与仅基于无线电按钮选择中填充数据表中的数据而没有触摸列可见性相比，它的速度非常慢。

这是我拥有的，我尝试的是：

（假设单选按钮列表包含"选项1"，"选项2"，"选项3"one_answers"选项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;
        }
    }

update

我改编了亚历克斯的建议，尽管我不确定我是否正确理解了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;
    }
});

Answer 1

<asp:RadioButtonList被渲染为input type="radio"列表，示例中的Repeater是table。因此，您想要在客户端轻松完成的操作。这样的东西。

基于OP Update

更新

ASP.NET可以将前缀添加到控制ID中，因此使用CSS类是很明智的。只需确保它们在页面上是唯一的。

 <asp:RadioButtonList runat="server" ID="rblOptions" CssClass="make-list"...

最终更新

首先决定您想要什么。

如果中继器的内容和布局取决于RadioButtonList选择，那么最佳选择是使用服务器端代码（使用RadioButtonList AutoPostBack="true"），并决定在repeater_ItemDataBound处理程序中显示/隐藏什么。如果您仍然想添加一些客户端代码，请从

调用该代码

ScriptManagerRegisterStartupScript(...

$('.make-list').on('click', '[type=radio]', function() {
  //var make = this.parentNode.innerText; //if you want to use text instead of value (not recommended)
  var tbl = $('#svDataTable');
  $('td, th', tbl).show();
  if (this.value == -1)
    return; //show all
  switch (this.value) {//**this** is radio button clicked
    case "1":
      $('tr>*:nth-child(1),tr>*:nth-child(3)', tbl).hide();
      break;
    case "2":
      $('tr>*:nth-child(2),tr>*:nth-child(3),tr>*:nth-child(5)', tbl).hide();
      break;
    default:
      $('tr>*:nth-child(' + this.value + ')', tbl).hide();
      break;
  }
});

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="opts" class="make-list">Hide a column
  <label><input type="radio" name="opt" value="-1" />show all</label>
  <label><input type="radio" name="opt" value="1" />one</label>
  <label><input type="radio" name="opt" value="2" />two</label>
  <label><input type="radio" name="opt" value="3" />three</label>
  <label><input type="radio" name="opt" value="4" />four</label>
  <label><input type="radio" name="opt" value="5" />five</label>
</div>
<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>
    <tr>
      <td>dat 1.1</td>
      <td>dat 1.2</td>
      <td>dat 1.3</td>
      <td>dat 1.4</td>
      <td>dat 1.5</td>
    </tr>
    <tr>
      <td>dat 2.1</td>
      <td>dat 2.2</td>
      <td>dat 2.3</td>
      <td>dat 2.4</td>
      <td>dat 2.5</td>
    </tr>
  </tbody>
</table>

加上bootstrap.css