Dynamically creating columns

Question

I am trying to create DataTable columns on the basis of the JSON data I am getting from the server.

For the first time I am getting data which contains 9 columns, I am able to create DataTable with 9 columns .

After a click I am getting new data which contains 6 columns, I am able to create DataTable with those 6 columns and display data correctly.

MY PROBLEM IS : I AM STILL GETTING 9 COLUMNS WHEN I SHOW DATATABLE, 6 COLUMNS ARE DISPLAYED CORRECTLY AND 3 COLUMNS OF THE PREVIOUS TABLE ARE ALSO DISPLAYED . THE COLUMN SIZE IS NOT CHANGED FROM 9 TO SIX.

HERE IS MY CODE:

function recreateTable(tableData,tableColumn,searchvalue){

        table = $('#example').DataTable(
        {
           "aaData": tableData,
           "aLengthMenu": [[5, 10, 20, -1], [5, 10, 20, "All"]],
           "iDisplayLength": 5,
           "aoColumnDefs" :tableColumn,
           "oSearch": {"sSearch": searchvalue},
           "bDestroy": true

        });


        $('.dataTables_filter input').focus();

        $('.dataTables_filter input').keyup(function() {
    searchvalue = $(this).val();
    if (searchvalue.length>3) {

       if(table.search( this.value ))
       {
    $.ajax({
                        url: 'search.php?method=searchdata',
                        type: "POST",   
                        dataType:'json',
                        data :{'searchvalue':searchvalue},
                        success:function(result){
                            //alert("success");
                            singleData=[];
                             for(var i=0;i<result.length;i++){
                                var obj = result[i];
                                for(var key in obj){
                                    singleData.push(obj[key]);
                                }

                             }
                                new_instance_id = singleData[0];
                                present = false;

                               for(var i=0;i<tableData.length;i++)
                                {

                                    instance_id=tableData[i][0];

                                    if(new_instance_id==instance_id){
                                     present = true;
                                     break;
                                } 
                                }

                              //  alert(present);

                               if(!present){
                                   tableData.push(singleData);
                                   table.clear();
                                   table.destroy();
                                   recreateTable(tableData,tableColumn,searchvalue);
                                  }


                          },
                          error :function(result){

                         // alert("failure in search");
                          }
    });
    }}
    }); 


}//FUNCTION CLOSE

My HTML:

<table id="example" class="table table-striped table-bordered table-hover dataTable" aria-describedby="bTable2_info" style="width: 100%;">
  <thead>
    <tr></tr>
  </thead>
  <tbody></tbody>
</table>

THIS IS MY CODE HOW POPULATE AND GET MY TABLECOLUMN :

columnnames =[];  //VARIABLE TO GET ALL KEYS WHICH WILL BE MY COLUMNS IN DATATABLE
    tableColumn =[]; // THIS IS THE ARRAY I AM PASSING TO aoColumnDefs

    singleData = []; //THIS IS TEMPORARY ARRAY TO POPULATE JSON DATA/VALUES 

    tableData =[]; // THIS THE ARRAY I AM PASSING TO aaData


    //getting first json object.
    var obj = data[0];
    alert(obj.price);


  //GETTING ALL COLUMN NAMES
  for(var key in obj){
  columnnames.push(key);}


  //SETTING COLUMN NAMES FOR DATATABLE

  for (var i=0; i < columnnames.length; i++ ) {
  tableColumn.push({
            "sTitle": columnnames[i].toUpperCase(),
            "aTargets": [i]
   });
  }

  //THIS CODE IS TO PUSH BUTTON AS DEFAULT IN LAST COLUMN
  tableColumn.push({

            "sTitle": "Action",
            "aTargets": [i],
            "sDefaultContent":"<button class='btn btn-minier btn-inverse'><i class='icon-calendar'></i> Daily Report</button>"
   });

I HOPE I AM CLEAR ABOUT MY QUESTION : Basically I am trying to create datatable with number of columns with respect to the data coming from server.

Answer 1

Add this code to the top of the recreateTable function as shown below:

function recreateTable(tableData,tableColumn,searchvalue){
    // If table was previously initialized
    if ($.fn.DataTable.isDataTable('#example')){
        // Destroy the table
        $('#example').DataTable().destroy();

        // Remove all content
        $('#example').empty();
    }    

    // ... skipped ...
}