在aspx页面中有条件地显示/隐藏jquery数据表列

Question

我在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;
    }
});