Jquery Datatable-Spalten in einer aspx-Seite konditional anzeigen/verbergen

Question

Ich habe eine Radioknopf-Liste in einer apsx-Seite und möchte Spalten in einer jQuery-Datentabelle je nach Optionsfeldauswahl ein-/ausblenden.

Ich schaffte es, es zu tun, aber es ist schmerzhaft langsam im Vergleich zu nur Daten in der Datentabelle basierend auf Radiobutton Auswahl zu füllen und nicht die Spalten Sichtbarkeit zu berühren.

Das ist, was ich habe und was ich versucht habe:

(Radio-Button-Liste unter der Annahme, enthält "Option 1", "Option 2", "Option 3" und "Option 4" als Auswahl 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; 
     } 
    } 

aktualisiert

angepasst I Alex Vorschlag wie unten, obwohl ich bin nicht sicher, ob ich Alex richtig verstanden und wenn es tut korrekt. Ich denke, becuasee „Debugger“ nicht, dass ich im Skript setzte nie getroffen wird .:

$(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 als eine Liste von input type="radio" gemacht wird und die Repeater in Ihrem Beispiel ist ein table. Was Sie wollen, kann leicht auf der Client-Seite getan werden. Etwas wie das.

aktualisieren basierend auf OP-Update

ASP.NET können Präfixe mit einer Steuer ID hinzufügen, so dass es klug ist, anstatt CSS-Klassen zu verwenden. Stellen Sie nur sicher, dass sie auf der Seite eindeutig sind.

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

Schluss Update

zunächst entscheiden, was Sie genau wollen.

Wenn Inhalt und Layout des Repeaters auf der RadioButtonList Auswahl hängt dann die beste Wahl ist serverseitigen Code zu verwenden (mit Radiobuttonlist AutoPostBack="true") und entscheiden, was in repeater_ItemDataBound Handler anzuzeigen/auszublenden. Wenn Sie noch einige clientseitigen Code dann diesen Code aufrufen aus

ScriptManagerRegisterStartupScript(... 

hinzufügen

$('.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