Search code examples
jqueryasp.netdatatablesshow-hide

Show/hide jquery datatable columns conditionally in an aspx page

I have a radio button list in an apsx page and want to show/hide columns in a jQuery data table depending on radio button selection.

I managed to do it but it is painfully slow compared to just populating data in data table based on radio button selection and not touching the columns visibility.

This is what I have and what I have tried:

(assuming radio button list contains "Option 1", "Option 2", "Option 3" and "Option 4" as choices, plus "All").

<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 code:

<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

I adapted Alex's suggestion like below, although I am not sure if I understood Alex correctly and if am doing it correctly. I guess not becuasee "debugger" I put in the script never gets hit.:

$(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;
    }
});
Solution

  • <asp:RadioButtonList is rendered as a list of input type="radio" and the Repeater in your example is a table. So what you want can be easily done on the client side. Something like this.

    Update based on OP update

    ASP.NET can add prefixes to a control ID so it is smart to use CSS classes instead. Just make sure they are unique on the page.

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

    Final update

    First decide what you exactly want.

    If content and layout of the repeater depend on the RadioButtonList selection then the best choice is to use server-side code (with RadioButtonList AutoPostBack="true") and decide what to show/hide in repeater_ItemDataBound handler. If you still want to add some client-side code then call that code from 

    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>

    Plus bootstrap.css