Reihen auf jquery Datentabelle basierend auf radiobutton Auswahl entfernen visualforce

Question

Ich habe herum gesucht und kann nicht herausfinden, wie man eine Datentabelle dynamisch mit einem Radioknopfauswahlwert ändert. Ich benutze auch Bootstrap, um die Dinge besser aussehen zu lassen.

Ich wünschte, ich hätte mehr zu geben, aber ich bin neu und ziemlich verloren, obwohl ich seit ein paar Stunden gegoogelt habe. Jede Hilfe würde sehr geschätzt werden.

Dies ist mein Javascript mit jQuery

<script> 
var j$=jQuery.noConflict(); 

j$(document).ready(function(){ 
//BEGINNING OF DATA TABLE 
    var titleTable = j$('[id$="titletable"]').DataTable({ 
     "order": [[1,"asc"]], 
     "columnDefs": [ { 
      "targets": 0, 
      "data": null, 
      "defaultContent": "<button class='btn btn-info'>Add to Queue</button>" 
     } ] 

    });//end of Data Table 

    j$('[id$=radioButtonValues]').on("change",function(event){ 

     //titleTable.rows().remove() where 
     //j$('[id$=radioButtonValues]').val() only matches data in the 3rd column 

    }); 
</script> 

Das ist mein Visualforce-Code ist

<apex:PageBlock > 
     <apex:outputLabel value="Display Games By Console!" id="consoleDisplayLabel"/> 
     <apex:selectRadio value="{!consoleValue}" id="radioButtonValues" > 
      <apex:selectOptions value="{!consoleOptions}" id="radioButtonOptions"/> 

     </apex:selectRadio> 
    </apex:PageBlock> 
<apex:PageBlock > 

     <table id="titletable" class="display"> 
      <thead> 
       <tr> 
        <th>Queue</th> 
        <th>Name</th> 
        <th>Console</th> 

       </tr> 
      </thead> 
      <tbody> 

       <apex:repeat value="{!titles}" var="title" > 
        <tr> 
         <td></td> 
         <td>{!title.Name}</td> 
         <td>{!title.Console__r.Name}</td> 

        </tr> 
       </apex:repeat> 

      </tbody> 
     </table> 
</apex:pageBlock> 

Und das ist mein Controller

public class AdminPageController 
{ 

public String consoleValue {get;set;} 

private String sortOrder = 'Name'; 
List<Console__c> theseConsole = new List<Console__c>([Select id,name FROM Console__c ]); 

public AdminPageController(){ 
     consoleValue = 'ALL'; 
}//constructor 

public List<SelectOption> getconsoleOptions(){ 

    List<SelectOption> consoleOptions = new List<SelectOption>(); 
    consoleOptions.add(new SelectOption('ALL', 'ALL')); 
    for(Console__c a : theseConsoles) 
    consoleOptions.add(new SelectOption(a.name,a.name)); 
    return consoleOptions; 

} 
public List<Title__C> gettitles() 
{ 
    List <Title__C> titlebyConsole = new List<Title__c>(); 
    if(consoleValue != 'All'){ 
     String soql = 'SELECT Name, Console__r.Name FROM Title__c WHERE Title__C.Console__r.Name = :consoleValue' + ' ORDER BY ' +sortOrder; 
     titlebyConsole = Database.query(soql); 
    } 
    else{ 
     String soql2 = 'SELECT Name, Console__r.Name from Title__c ORDER BY ' +sortOrder; 
     titlebyConsole = Database.query(soql2); 
    } 
    return titlebyConsole; 
}//end of Get titles 
} 

Answer 1

Ich habe den Eindruck, die Sie benötigen verstecken und entferne die Zeile nicht. Wenn ich Recht habe, müssen Sie eine benutzerdefinierte Suche implementieren, indem Sie DataTables erweitern. Hier ein Beispiel:

$(function() { 
    var table = $('#titletable').DataTable(); 
    $('input[type="radio"]').click(function() { 
    reset(); 
    var selection = $(this).val(); 
    $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) { 
     //does this row contain the text of the value selected in the radio button? 
     return $(table.row(dataIndex).node()).text().indexOf(selection) >= 0; 
    }); 
    table.draw(); 
    }); 

    function reset() { 
    $.fn.dataTable.ext.search.pop(); 
    table.draw(); 
    } 
    $('#reset').click(reset);  
}); 

Und hier ist ein full fiddle mit einigen gefälschten Daten.

Wenn Sie die Zeilen entfernen müssen, müssen Sie wissen, dass es keine Möglichkeit gibt, die Zeile erneut anzuzeigen, es sei denn, Sie pflegen einen Verweis darauf und fügen sie erneut zu DataTables hinzu. Es scheint, dass Sie ziemlich klar darüber sind, wie die API zum Entfernen von Zeilen funktioniert.