DataTable v1.10.4 ajax with columnDefs which lead to row($(this)).data() undefined data

dragon82

Hello People

I having difficulties getting data from row($(this)).data() which gave me undefined data.

Here my source code:

HTML:

<table id="table123" width="100%" cellspacing="0" cellpadding="0" class="default_table selectable_table">
                    <thead>
                        <tr>
                            <th rowspan="2"><img src="/img/table_arrow.png" alt=""></th>
                            <th rowspan="2">PACKAGE ID</th>
                            <th colspan="4"> Formula</th>
                            <th rowspan="2">Action</th>
                        </tr>
                        <tr>

                            <th>SLOT ID</th>
                            <th>MODULE ID</th>
                            <th>PACKAGE TITLE</th>
                            <th>PACKAGE STATUS</th>                                                     
                        </tr>
                    </thead>

                    <tfoot>
                        <tr>
                            <th rowspan="2"><img src="/img/table_arrow_flipped.png" alt=""></th>
                            <th rowspan="2">PACKAGE ID</th>
                            <th colspan="4">Formula</th>
                            <th rowspan="2">Action</th>
                        </tr>
                        <tr>                             
                            <th>SLOT ID</th>
                            <th>MODULE ID</th>
                            <th>PACKAGE TITLE</th>
                            <th>PACKAGE STATUS</th>                                                       
                        </tr>
                    </tfoot>
                </table>

Javascript:

$(document).ready(function () {

       var table = $("#table123").DataTable ({
            "pagingType": "full_numbers",
            "processing": true,
            "serverSide": true,
            "ajax": "/server_processing.php",
            "columnDefs": [
                {"className": "center", "targets": [0], "data": null, "searchable": false, "render": function (data, type, full, meta) {
                        return '<input type="checkbox" name="checkbox" class="select"/>';
                    }
                },
                {"targets": [1], "data": "PACKAGE_ID"},
                {"targets": [2], "data": "SLOT_ID"},
                {"targets": [3], "data": "MODULE_ID"},
                {"targets": [4], "data": "PACKAGE_TITLE"},
                {"targets": [5], "data": "PACKAGE_STATUS"},               
                {"className": "center", "targets": [7], "data": null, "searchable": false, "render": function (data, type, full, meta) {
                        return '<a class="btn">Export</a>';
                    }
                }
            ]           
        });
        
        $("#table123 > tbody").on( "click", "tr", function () {
                             
               var data = table.row($(this)).data();            
            
                
               alert("Data: " + data[1] + " " + data[2] + " " + data[3]);
                                   
        } );

       $("#table123 > tbody").on("click", "tr > td > a.btn:contains('Export')", function () {
            
                       var data = table.row($(this).parents("tr")).data();  

                        alert("Data: " + " " + data[1] + " " + data[2] + " " + data[3]);
                
                    
                });



  });

When I click on the row it would not pop up the alert message

and when I click on the "Export" button, it pop up the alert message and said:

Data: undefined undefined undefined

Anyone mind lend a helping hand?

Thanks

:)

dragon82

Hello People,

I found out that

 $("#table123 > tbody").on( "click", "tr", function () {
                              
               var data = table.row($(this)).data();           
             
                 
               alert("Data: " + data[1] + " " + data[2] + " " + data[3]);
                                    
        } );

having conflict with

$("#table123 > tbody").on("click", "tr > td > a.btn:contains('Export')", function () {
             
                       var data = table.row($(this).parents("tr")).data(); 
 
                        alert("Data: " + " " + data[1] + " " + data[2] + " " + data[3]);
                 
                     
                });

during event handling

therefore I changed the code to

$("#table123 > tbody").on("click", "a.btn:contains('Export')", function () {
             
                       var data = table.row($(this).parents("tr")).data(); 
 
                        alert("Data: " + " " + data[1] + " " + data[2] + " " + data[3]);
                 
     });

Now when I click on any of the table row, the alert will pop up and say

Data: undefined undefined undefined

this same goes with the "Export" button when I clicked on it

As a result, I change my code to:

 $("#table123 > tbody").on( "click", "tr", function () {
                              
               var data = table.row($(this)).data();           
             
                 
               alert(data);
                                    
        } );

and this time when I click on the table row it say:

[object Object]

Anyone know how to convert this object into string data?

Thanks

:)

dragon82

I got the answer :D

I add JSON.stringify(object); to my code

$("#table123 > tbody").on( "click", "tr", function () {
                              
              var data = table.row($(this)).data();          
             
                 
              alert(JSON.stringify(data));
                                    
       } );

and it return

["PACKAGE_ID":"blah","SLOT_ID":"blah", "MODULE_ID":"blah"]

therefore I just change my code to

$("#table123 > tbody").on( "click", "tr", function () {
          
              alert(data["PACKAGE_ID"] + data["SLOT_ID"] + data["MODULE_ID"]);
                                    
       } );