How to adjust the no.of columns dynamically for datatables

How to adjust the no.of columns dynamically for datatables

nandy_2992nandy_2992 Posts: 3Questions: 1Answers: 0

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

Answers

  • allanallan Posts: 63,352Questions: 1Answers: 10,443 Site admin

    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_2992nandy_2992 Posts: 3Questions: 1Answers: 0

    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.

  • allanallan Posts: 63,352Questions: 1Answers: 10,443 Site admin

    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_2992nandy_2992 Posts: 3Questions: 1Answers: 0

    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

  • allanallan Posts: 63,352Questions: 1Answers: 10,443 Site admin

    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

  • acaviteacavite Posts: 3Questions: 1Answers: 0

    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,
        });
    });
    
This discussion has been closed.