how to add class name to jquery.datatables cell(td)?

matt.crawfoord

i want a column (including th and all td's) have a class name ="details-control".
there is this issues:
i use this code to initialize the class but it is not working.

       "aoColumnDefs" : [  
                            {"aTargets" : [0], "mData" : null, "sClass":  "details-control"},  
                            {"aTargets" : [1], "mData" : "datetime"},  
                            {"aTargets" : [2], "mData" : "message"}  
                          ]

javascript code:

<script> 
 /* Formatting function for row details - modify as you need */
 function format ( d ) {
// `d` is the original data object for the row
return '<table cellpadding="3" cellspacing="0" border="0" style="padding-left:50px;">'+
    '<tr>'+
        '<td>message:</td>'+
        '<td>'+htmlspecialchars(d.message)+'</td>'+
    '</tr>'+
    '<tr>'+
        '<td>detail</td>'+
        '<td>'+info+'</td>'+
    '</tr>'+

'</table>';
}

$(document).ready(function() {
 var table = $('#example').dataTable({

             "bProcessing": true,
             "sLengthMenu": true,
             "sEmptyTable": true,
             "bFilter" : true,
             "bInfo" : true,
             "sAjaxSource": "getresults.php",

             "fnServerData": function ( sSource, aoData, fnCallback ) {
            aoData.push( {"name": "from", "value": "<?php echo $from; ?>"} );
                aoData.push( {"name": "to", "value": "<?php echo $to; ?>"} );

                $.ajax( {
                        "dataType": 'json',
                        "type": "POST",
                        "url": sSource,
                        "data": aoData,
                        "success": function(result){
                            if (result.iTotalRecords == 0) {
                                   // 
                             } else {
                                   fnCallback(result)
                            }
                        }

                } );
        },
 /**it's looks like sClass didn't work  ????????
            "aoColumnDefs" : [  
                            {"aTargets" : [0], "mData" : null, "sClass":  "details-control"},  
                            {"aTargets" : [1], "mData" : "datetime"},  
                            {"aTargets" : [2], "mData" : "message"}  
                          ]
        });     


// the event listener for opening and closing details , cannot work ??????
$('#example tbody').on('click', 'td.details-control', function () {
    var tr = $(this).closest('tr');
    var row = table.row( tr );

    if ( row.child.isShown() ) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        // Open this row
        row.child( format( row.data())).show();
        tr.addClass('shown');
    }
} );
   } );
  </script>

my JSON file from getresults.php

{
"iTotalRecords": 69511,
"iTotalDisplayRecords": 69511,
"aaData": [
    {
        "message":"long long message",
        "user":"jack",
       "info": "personal info......."
        "time":"2016-06-23T08:11:23.000Z"
    },
 .......

getresults.php

echo json_encode($results);

What are any potential errors that I am overlooking?

Any help will be appreciated!

allan

Use columns.className. If that doesn't work, we'd need a link to the page showing the issue.

Allan