How to adjust the no.of columns dynamically for datatables

nandy_2992

Hi,
The no.of columns differ for three cases. The datatable is being displayed properly for the first two cases as they have equal no.of columns. But when i try to load for the third case, i get a hazy look, and its displaying 'sWidth undefined' as the no.of columns increases. And the same is happening for the vice-versa.. Could you help me with this? I tried to destroy the datatable but it did not work as i call the same function for three cases in same grid.

Thanks

allan

You have to have the correct number of columns in your HTML when you initialise the DataTable, or, if the HTML has no columns, you have to have the correct number of columns in the columns array.

Allan

nandy_2992

I defined the no.of columns for the cases in their own function call. I use same function for generating a datatable through out the application. And when i click for the third case, since the no.of columns increases by 2, the datatable breaks. I get this error only for this scenario as the three cases are being loaded one after another.

allan

I'd need a link to the page to understand what is going wrong. I can only presume that the columns array and HTML don't match.

Allan

nandy_2992

var oTable = $('#'+DT_Array['id']).dataTable({
"bDestroy": true,
"dom": 'Rlfrtip',
"sDom": '<"H"lTfr>t<"F"ip>',
"oTableTools" : {
//"aButtons" : ["copy", "print", "csv", "pdf","xls"],
"aButtons" : ["xls"],
"sSwfPath" : server_path+"/js/TableTools/swf/copy_csv_xls_pdf.swf",
"aButtons": [
{
"sExtends": "xls",
"sFileName": export_file_name+".xls"
}
],
},

    "order": DT_Array['order'],
    "start": 0,
    "aoColumns": DT_Array['def'],
     // "aoColumnDefs": DT_Array['def'],
    "fnInitComplete": function() {
        $('#'+DT_Array['id']).css("width","100%");
    },
    "aLengthMenu": [[10, 20, 30, 50, 100, 500, 1000,2000,4000,5000], [10, 20, 30, 50, 100, 500, 1000,2000,4000,5000]],
    "iDisplayLength": 100,
    "autoWidth": false,
    "bProcessing": true,
    "bServerSide": true,
    "bJQueryUI": true,
    "bPaginate":true,
    "bAutoWidth": false,
    "sScrollX" : false,
    "sScrollY" : DT_Array['height'],
    "sPaginationType":"full_numbers",
     "deferRender": true,
    // "bDestroy": true,
    "oLanguage": {
        "sLoadingRecords": "Please wait - loading...",
        "sProcessing": "<img src='"+DT_Array['serverpath']+"/images/loading.gif' />"
    },

    "ajax": {
        "url": ajax_url,    
        "type": "POST",
         "dataSrc": function ( json ) {
             console.log(json.data);
            var dt_data = json.data;
            $.fn.GetExp_Tooltip();
            return dt_data;
        }       
    },
});

This is how i have defined the datatable.

Thanks

allan

Sorry - I'd need to see the page, as I requested above. That will let me trace through the code live to see what is going wrong.

Allan

acavite

FYI, not sure if this helps.. but if you're not using server side processing you can actually get pretty dynamic with it by being less specific.

First get your data from database the old fashion~ish way (this example uses a custom class, that I've trimmed a lot of stuff out of.. use your own method to retrieve data):

$users = db_select2(....);

Next just print the table to HTML in a dynamic way:

// Start table
print "<table class=\"table table-sriped table-hover table-condensed table-bordered data-table\" cellspacing=\"0\" width=\"100%\">";
print "<thead>";
print "<tr>";

// Print table header / column names
$columns = get_object_vars($users[0]);
print "<th></th>";
foreach($columns as $column=>$value) {
    print "<th>{$column}</th>";
}
print "</tr>";
print "</thead>";

// Print table body / rows
print "<tbody>";
foreach($users as $user){
    print "<tr class=\"data-row\">";
    foreach($user as $column=>$value){
        print "<td>{$value}</td>";
    }
    print "</tr>";
}
print "</tbody>";

// Print table footer / summary values
// print "<tfoot>";
// print "<tr>";
// foreach($summary as $column => $value){
//  print "<th> {$value} </th>";
// }
// print "</tr>";
// print "</tfoot>";

// End user contact table
print "</table>";

And finally just initialize the table:

// Initiate plugins when ready
$(document).ready(function(){
    // Data Tables
    $('.data-table').DataTable({
        paging:    false,
        ordering:  true,
        info:      false,
        searching: true,
        autoWidth: false,
        fixedHeader: true,
    });
});