Skip to main content
Emphasise question
Source Link
Keith C
  • 137.3k
  • 29
  • 218
  • 458

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.my question is How to collect selected rows using jquery.

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.

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.

Code formatting
Source Link
metadaddy
  • 16.5k
  • 5
  • 57
  • 103

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

$('#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() {

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


 }
}

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

                     } 

}); 

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


 
}
$('#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]; 
  }
}
Source Link
vraavi
  • 335
  • 2
  • 6
  • 17

How to add a check box column to jquery datatable

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( '');

                     } 

}); 

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



}