2

I need to add a check box column to a jquery data table and make the row selectable. Once rows are selected and clicking up on submit button then the id's of selected rows should send back to the controller using java script remoting. my question is How to collect selected rows using jquery.

Visual Force Page

$('#mgtable').dataTable({
           sPaginationType: "full_numbers", "bJQueryUI" : true,"sDom": '<"H"lfr>t<"F"ip>',
           "aoColumnDefs": [
               { "aTargets":[ "mgName" ], "mData": "Name",sClass:"Name", "bAutoWidth": false },
               { "aTargets":[ "gcb" ], "mData": "CreatedBy.Name", sClass:"CBName", "bAutoWidth": false },
               { "aTargets":[ "desc" ], "mData": "Client_Group_Description__c", sClass:"CGDesc", "bAutoWidth": true }
           ],
          "fnInitComplete": function(oSettings) { 
                  MasterDetailListController1.refreshMasterGroupList(function(result, event){
                     if(event.type == 'exception') {
                        alert(event.message);         
                     } else {   
                       $('#mgtable').dataTable().fnAddData(result);         
                     }
                   });
           },
           "fnCreatedRow": function( nRow, aData, iDataIndex ) {
                                 $('td:eq(0)', nRow).html( '<input type="checkbox" name="checkbox" class="checkbox" value="'+ aData.Id+'">');

                         } 

    }); 

    <table id="mgtable" class="display">
        <thead>
            <th><input type="checkbox" id="selectall"/></th>
            <th class="mgName">Master Group Name</th>
            <th class="gcb">Group Created By</th>
            <th class="desc">Description</th>
        </thead>
        <tbody></tbody>
    </table>

Apex Controller:

public with sharing class DataTableController { 
  @RemoteAction
  public static list<Client_Group__c> refreshMasterGroupList() {
    return [select id,Name,CreatedBy.Name,Client_Group_Description__c from Client__c order by Name];
  }
}
1
  • have you got any solution for this as I am facing the same issue, losing all the selections of the previous pages. Any Help is much appreciated. Feb 11 '15 at 19:48
2

This code will match all the checked checkboxes of class "checkbox" add add their values in to a JavaScript array:

var ids = [];
$("input.checkbox:checked").each(function() {
    ids.push($(this).val());
});
3
  • It worked thank you.
    – vraavi
    May 8 '14 at 17:42
  • @ keith, this script is not picking those row selected in previous page with in the table it is only picking rows selected in current page of pagination.
    – vraavi
    May 9 '14 at 19:39
  • @vraavi I would guess that only the current page is in the DOM. So if you need the checked state to be preserved across pages you'll need to add code to e.g. a fnUpdate (datatables.net/development/pagination) to grab the ideas before the page changes. There are 6000+ questions on datatables at stackoverflow.com/questions/tagged/datatable so you might get more help there.
    – Keith C
    May 9 '14 at 20:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.