라디오 버튼 선택을 기반으로 jquery datatable의 행을 제거합니다. Visualforce

Question

라디오 버튼 선택 값을 사용하여 데이터 테이블을 동적으로 변경하는 방법을 알아 냈습니다. 나는 상황을 더 좋게 보이게하기 위해 부트 스트랩도 사용하고 있습니다.

나는 당신에게 줄 것이 더 많았 더라면 좋겠지 만, 나는 두 시간 동안 인터넷 검색을하고 있었지만 새롭고 꽤 잃어 버렸다. 어떤 도움이라도 대단히 감사 할 것입니다.

이이 내없이 VisualForce 코드

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

입니다

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

jQuery로 내 자바 스크립트입니다 그리고 이것은 당신이 숨길 필요가 인상을 얻을 내 컨트롤러

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

입니다 행을 제거하지 마십시오. 내가 맞다면 DataTables를 확장하여 사용자 정의 검색을 구현해야합니다. 다음은 예입니다 :

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

그리고 여기에 일부 가짜 데이터로 full fiddle을합니다.

행을 제거해야하는 경우 해당 행에 대한 참조를 유지하고 DataTables에 다시 추가하지 않으면 행을 다시 표시 할 수 없음을 알아야합니다. API를 사용하여 행을 제거하는 방법에 대해 분명히 알고있는 것으로 보입니다.