基于单选按钮选择visualforce删除jquery数据表上的行

Question

我一直在搜索，无法找到如何使用单选按钮选择值动态更改数据表。我也在使用bootstrap，以使事情看起来更好。

我希望我能有更多的东西给你，但即使我已经谷歌搜索了几个小时，我也很新。任何帮助将非常感激。

这是我用jquery的javascript

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

这是我的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>

这是我的控制者

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如何用于删除行。