Answers

• allan Posts: 63,252Questions: 1Answers: 10,420 Site admin

  June 2016

  I would like to figure out how I can set the associated record inside the Salesforce controller to true when I select it on the Datatable.

  I'm afraid I know nothing about SaleForce so I can't help with that aspect. however, you would use a selected event handler on the row and row().data() to get the data for the clicked row.

  I would also like to sum the selected rows and add the value to a cell in the footer.

  The selected event handler could also do that and use column().footer() to get the footer cell that you need to write into.

  Allan
• initialfresh Posts: 8Questions: 4Answers: 0

  June 2016

  Thanks for the references allan!

  Can you please help me figure out how to determine if the Datatables Select checkbox is checked & also how to locate the hidden input checkbox within that same row in the first cell and check that as well.

  Here is what I think will help me do this...

  transactionTable
      .on( 'select', function ( e, dt, type, indexes ) {
          //Iterate through each row
          transactionTable.rows( { selected: true } ).every( function ( rowIdx, tableLoop, rowLoop ) {
              var data = this.data();                        
              console.log('row: ' + rowIdx + '; Data: ' + data)
              //If Datatable Select checkbox is checked
                  //Select the hidden input checkbox in the first cell of that row and check it
                  //recalculate sum of selcted
          } );
      } )
      .on( 'deselect', function ( e, dt, type, indexes ) {
          //Same as select, except input checkbox will be unchecked
      } );
  
• allan Posts: 63,252Questions: 1Answers: 10,420 Site admin

  June 2016

  That basically looks okay to me. If it isn't working I'd need a link to a test case using JSFiddle or http://live.datatables.net to demonstrate the issue.

  Allan
• initialfresh Posts: 8Questions: 4Answers: 0

  June 2016

  Everything seems to be working okay except it only works on the first click after the page loads.

  So when the page loads I can click the Datatables Select checkbox and the associated input checkbox will check but after I deselect the Datatables Select checkbox and select it again the associated input checkbox does not check.

  You can see the problem in this fiddle...

  https://jsfiddle.net/a13xy/de7jfgy6

  Here is my code...

          j$ = jQuery.noConflict();
          var globalRow;
          var globalZero;
          j$(document).ready( function () {                
              var events = j$('#events');
              var transactionTable;
  
              drawDataTables();            
              //displayCreatedPayments();
  
              function drawDataTables(){
                  transactionTable = j$('[id$="transactiontable"]').DataTable({                                    
                      "bFilter": false,
                      "bSort" : true,           
                      order: [[ 1, 'asc' ]],
                      fixedHeader: true,     
                      columnDefs: [ {
                          orderable: false,
                          className: 'select-checkbox',
                          targets:   0
                      } ],
                      select: {
                          style:    'os',
                          selector: 'td:first-child'
                      },            
                  //TODO: rearrange dom; pagination, SHOWING 10 of 100, etc 
                      buttons: [
                          'selectAll',
                          'selectNone'
                      ],
                      dom: 'Bfrtip'
                  });                    
              }
  
              transactionTable
                  .on( 'select', function ( e, dt, type, indexes ) {
                      var sumSelected = 0;
  
                      transactionTable.rows( { selected: true } ).every( function ( rowIdx, tableLoop, rowLoop ) {
                          var data = this.data();                        
  
  
  
                          var checkboxCell = transactionTable.cell({ row: rowIdx, column: 0 }).node();
                          var amountCell = transactionTable.cell({ row: rowIdx, column: 4 }).node();
                          //CHECK HIDDEN CHECKBOX
                          var checkboxNode = j$('input', checkboxCell);
                          checkboxNode.attr('checked', true);
  
                          //CALCULATE SUM OF SELECTED
                          var currency = amountCell.textContent;
                          var number = Number(currency.replace(/[^0-9\.]+/g,""));
                          sumSelected += number;
                      } );
  
                      console.log('select: SUM OF SELECTED: '+sumSelected);
  
                      var column = transactionTable.column( 4 );
                      j$( column.footer() ).html(sumSelected);
            
                  } )
                  .on( 'deselect', function ( e, dt, type, indexes ) {
                      transactionTable.rows( { selected: false } ).every( function ( rowIdx, tableLoop, rowLoop ) {
                          var cell = transactionTable.cell({ row: rowIdx, column: 0 }).node();
                          console.log('false: Before Check: '+j$('input', cell).val());
                          j$('input', cell).attr('checked', false);
                          console.log('false: After Check: '+j$('input', cell).val());
                      });
  
                      //CALCULATE SUM OF SELECTED
                      var sumSelected = 0;
                      transactionTable.rows( { selected: true } ).every( function ( rowIdx, tableLoop, rowLoop ) {
                              var amountCell = transactionTable.cell({ row: rowIdx, column: 4 }).node();
                              var currency = amountCell.textContent;
                              var number = Number(currency.replace(/[^0-9\.]+/g,""));
                              sumSelected += number;
                          });
                      console.log('deselect: SUM OF SELECTED: '+sumSelected);
                      var column = transactionTable.column( 4 );
                      j$( column.footer() ).html(sumSelected);
                  } );
  
  
          });//end ready
  
• allan Posts: 63,252Questions: 1Answers: 10,420 Site admin

  June 2016 Answer ✓

  So when the page loads I can click the Datatables Select checkbox and the associated input checkbox will check but after I deselect the Datatables Select checkbox and select it again the associated input checkbox does not check.

  I'm not seeing that issue in the fiddle I'm afraid. These are the steps I took:

  1. Click checkbox in the first row in the table. Outcome: checked and row selected
  2. Click checkbox in the first row in the table again. Outcome: unchecked and row deselected.
  3. Once more click checkbox in the first row in the table. Outcome: checked and row selected

  This is with Chrome / Mac.

  Is that not what you are seeing?

  Allan