Working with the Select extension & Salesforce Apex?

initialfresh

There are a few things that I need help with & I've looked everywhere...

I am building a Datatable with the Select extension inside a Salesforce Visualforce page.

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 would also like to sum the selected rows and add the value to a cell in the footer.

You can find my code for the page and controller here...

https://jsfiddle.net/a13xy/ho7n121x/1/

Thanks in-advance for any help/insight

allan

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

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

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

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

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