Issue with DataTables in VF page : Uncaught TypeError: table.rows is not a function

Question

I'm using DataTables in a VF page together with LDS. I basically loads some data to the table and there are check boxes for each and every row of data. So based on the user selection they should be able to delete selected rows(recods). Here is my JS code to get the selected records.

function getSelectedDataRowValues(tableId){

                var compTable = this[tableId.replace(/\-/g, '_')];
                alert(compTable);

                var dataRowNodes = compTable.rows().nodes();
                var dataRowValues = compTable.rows().data();

                var selectedDataRowValues = new Array();

                for(var i=0; i<dataRowNodes.length; i++){
                    var checkbox = j$(dataRowNodes[i].children[0].children[0]).find('input');
                    if (checkbox.prop('checked')){
                        selectedDataRowValues.push(dataRowValues[i]);
                    }
                }

                return selectedDataRowValues;
            }

But every time I run the code I keep getting following error.

Uncaught TypeError: compTable.rows is not a function

But when I used compTable.rows there were no issues. I'm using the latest DataTable version though. Here is my header though:

<apex:stylesheet value="{!URLFOR($Resource.DataTables, 'DataTables-1.10.13/media/css/jquery.dataTables.min.css')}"/>
<script src="{!URLFOR($Resource.DataTables, 'DataTables-1.10.13/media/js/jquery.dataTables.min.js')}"/>

What could go wrong here? Any suggestions? Or else is there any way to capture selected rows and process with them?

Answer 1

I just did a similar thing and this is what I have to see if the checkbox in the first column is checked. This assumes you are initializing using DataTable and not dataTable as the former returns the API and the latter returns the jQuery type object

It is important to note that it is tough to give you an exact answer as a lot of it depends on the structure of your table and td contents. Use this as a starting point

Initialze the table

var dtAPI = $('[id$=products-table]').DataTable();

Function that logs the various stuff for debugging and adds the data-id attribute to an array

function printSelected(){
            var selectedPBEIds = [];
            dtAPI.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
                var cellZero = dtAPI.cell(rowIdx,0).node();
                if($("input", cellZero).prop('checked')){
                    console.log($("input",cellZero).attr('data-id'));
                    console.log($(dtAPI.cell(rowIdx,1).node()).attr('data-label'));
                    selectedPBEIds.push($("input",cellZero).attr('data-id'));
                }
            });


        }

First column of table with checkbox is as follows

                <th scope="row">
                    <div>
                        <apex:inputCheckbox html-data-id="{!p.pbe.Id}" value="{!p.isSelected}"/>
                    </div>
                </th>

Datatables is great and has great documentation although it is tough to find what you need if you do not know what you need as it is written like you already understand the API.