0

I am trying to manipulate multiple row selections using jQuery DataTables checkboxes plugin.But having issues in getting selected rows from page to controller ...getting c.selected = false in controller. Here is the link to jQuery DataTables checkboxes plugin. https://www.gyrocode.com/projects/jquery-datatables-checkboxes

   public class DataTableExampleController {
    public Boolean selected {get; set;}
    public List<Contact> contactList {get;set;}
    public List<cWrapper> cListWrapper {get;set;}

    public DataTableExampleController(){
        contactList = [SELECT Account.Name, FirstName, LastName,Description, Phone FROM Contact limit 1000];
        cListWrapper = new list<cWrapper>();

            for(Contact c: contactList) {
                cListWrapper.add(new cWrapper(c));
            }
    }    
    public class cWrapper {

        public Contact  con {get; set;}
        public Boolean selected {get; set;}


        public cWrapper(Contact  c) {
            con = c;
            selected = false;
        }
    }

    public PageReference reset() {
        PageReference pg = new PageReference(System.currentPageReference().getURL());
        pg.setRedirect(true);
        return pg;
    }

   public PageReference processSelected(){

        list<Contact> selectedContacts = new List<Contact>();
        for(cWrapper c: cListWrapper) {
            if(c.selected == true) {
                selectedContacts.add(c.con);
            }
        }

        for(Contact  c: selectedContacts) {
            c.Description = 'TEST';
        }

         update selectedContacts;
        return null; 
     }   

}

    <apex:page Controller="DataTableExampleController">
    <apex:form>
    <head>
       <apex:includescript value="https://code.jquery.com/jquery-1.11.1.min.js" / >
       <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.18/r-2.2.2/rg-1.0.3/sl-1.2.6/datatables.min.css"/>
       <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.18/r-2.2.2/rg-1.0.3/sl-1.2.6/datatables.min.js"></script>
      <link type="text/css" href="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.11/css/dataTables.checkboxes.css" rel="stylesheet" />
      <script type="text/javascript" src="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.11/js/dataTables.checkboxes.min.js"></script>  
        <script>
          j$ = jQuery.noConflict();
         j$(document).ready(function () {
         var conTable = j$('[id$="contacttable"]').DataTable({
                   "pageLength": 50,
                   'columnDefs': [{
                   'targets': 0,
                        'checkboxes': {
                              'selectRow': true
                   },
                        "orderable": false 
                    }
                   ],

               'select': {
               'style': 'multi'
                     }
                  });

            });

        </script>

    </head>
       <apex:pageBlock>
        <apex:pageBlockButtons location="top">
               <apex:outputPanel layout="none" id="buttonsPanel">
                  <apex:commandButton value="Update Contacts" action="{!processSelected}"> 
                </apex:commandButton> 
                <apex:commandButton value="Reset" action="{!reset}" immediate="true"/>
               </apex:outputPanel>      
            </apex:pageBlockButtons>
    <body>
        <table id="contacttable" class="display">
            <thead>
                <tr>
                    <th><apex:inputCheckbox/></th>
                    <th>Account</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Phone</th>
                </tr>
            </thead>
            <tbody>
                <apex:repeat value="{!cListWrapper}" var="c">
                    <tr>
                    <td><apex:inputCheckbox value="{!c.selected}" id="inputId"/></td>
                        <td>{!c.con.Account.Name}</td>
                        <td>{!c.con.FirstName}</td>
                        <td>{!c.con.LastName}</td>
                        <td>{!c.con.Phone}</td>
                    </tr>
                </apex:repeat>
            </tbody>
        </table>
     </body>
    </apex:pageBlock>        
   </apex:form>
 </apex:page>
  • You're head and body tags are not only in the wrong places they are not generally needed when doing VF pages. I use jquery datatables in a few pages and have had no issues when excluding these tags so I'd advise just getting rid of them. Also, make sure all your script use apex:includescript and all your css use apex:stylesheet as thesse automatically de-dup to make sure you are only including 1 copy of each script/stylesheet. – gNerb Sep 20 '18 at 15:48
  • I'm a little concerned because of how datatables works, that it's modifying the dom in a way that removes the code SFDC puts into the table to bind the values. Can you inspect your page after it is rendered and provide the rendered HTML of your table. – gNerb Sep 20 '18 at 15:52
  • I always bind fields with the controller, pure apex. So i would rather go with apex:inputCheckbox and bind the value to a controller property. And your wrapper does the rest! – L Mudiyanse Sep 21 '18 at 3:35
0

It took some digging, fortunately I back up everything, but I found my old jquery datatables page.

I ended up doing everything using the javascript API for reasons much like the one you are facing. You can use this documentation for help on using the AJAX Api.

This will allow you to maintain a list in JS of the records and you can manipulate the records using JS instead of apex and then update/insert the records.

An added benefit is that using the AJAX Api is usually much quicker than then normal VF value bindings, ajax calls and rerenders.

Why it doesn't work

As briefly mentioned in the comments, my best guess as to why it doesn't work is because of the DOM manipulation that datatables does. For instance, if it were to change an Id or class name it could stop necessary scripts from finding the elements or if there is code bound to the elements but datatables destroys and re-cosntructs them that could also cause the code to stop working.

I don't want to pretend that I have a strong knowledge of the JS scripts that sfdc uses to drive VF value bindings (all that cool hidden stuff VF does for you automatically) but in general, two different libraries modifying the DOM of a page at the same time is bound to cause conflicts.

  • Thanks @gNerb Is there a way to get records without AJAX API.I need to do lot of processing of those selected records inside contoller. So,Is there any other way to pass selected records from visualforce to controller – sfdc Sep 20 '18 at 18:42
  • There's plenty of ways, but probably not with the jquery data tables. If you want a table that has many of the ssame features but is built using VF components instead of using datatables you can try github.com/gnerb/Salesforce-Samples/tree/master/… – gNerb Sep 20 '18 at 19:04

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.