JQuery datatable: dynamically manipulate aoColumns attributes

Question

I have a requirement in which I need to change data table data and headers based on a radio button selection. The response is provided through an AJAX request. We can easily change the data using the API function. But I need to change the properties of the column (in particular, sTitle, mData), since my answer has different keys for each switch selection.

For the first switch, my answer is:

{"id" :101, "label" : "Ragesh"}; headers - Id, Label , 

Second radio button response:

  {"type" :2 , "name" :"Ravi"} ; headers - Type, Name 

Please tell me how to do this without recreating the data table.

If any clarification is required, I can provide more details.

Any help is much appreciated !!!

~ Ragesh

Answer 1

There is one very complicated workaround based on column hashing.

Follow these steps to initialize the table. First define "aoColumns": with four columns:

 "aoColumns": [ { "sTitle": "Id", "mData": "id" }, { "sTitle": "Label" "mData": "label" }, { "sTitle": "Type", "mData": "type" }, { "sTitle": "Name" ,"mData": "name" }] 

Then define the ajax source, for example, for the first switch case:

 "sAjaxSource" : "/getFirstAjaxSource"; 

After initializing the table, set the 3 and 4 columns (in your case, “Type” and “Name”) as invisible using jQuery, so you will only see the first and second columns:

  $(function(){ oTable.fnSetColumnVis( 2, false); oTable.fnSetColumnVis( 3, false ); }) 

Then, the following logic is used in the click handler functions.

First button:

 jQuery('#first').live('click',function () { oTable.fnSettings().sAjaxSource = "/getFirstAjaxSource"; oTable.fnSetColumnVis( 0, true); oTable.fnSetColumnVis( 1, true ); oTable.fnSetColumnVis( 2, false); oTable.fnSetColumnVis( 3, false ); }); 

Second button:

 jQuery('#second').live('click',function () { oTable.fnSettings().sAjaxSource = "/getSecondAjaxSource"; oTable.fnSetColumnVis( 0, false); oTable.fnSetColumnVis( 1, false ); oTable.fnSetColumnVis( 2, true); oTable.fnSetColumnVis( 3, true ); }); 

Remember to add fake values ​​for hidden columns in the ajax source.

Answer 2

I finally managed to find a solution. I initialized the table using the first two columns, specifying a class for each column with the attribute "sClass", for example, (Id, Label) and based on the selection of the switch, I first changed the header text of both columns accordingly. For the data that I did, I analyzed the answer and created a unique format for both cases.

Let me clarify:

Data initialization:

 $('#myTable').dataTable({ "aoColumns": [ {"sTitle": "Label", "mData": "column1_data","sClass" : "header1"}, {"sTitle": "Type", "mData": "column2_data","sClass" : "header2"}, {"bVisible" : false, "mData" : "id"}], "sScrollY": "150px", "aaData": [], "sPaginationType": "full_numbers", "bfilter": false, "bDestroy": true, "bAutoWidth":true, "sDom": 'T<"clear">lfrtip', "oTableTools": { "sRowSelect": "multi", "aButtons": [] } }); 

Then I analyzed the answer and created a unique data structure for both cases, as shown below:

A function that returns a unique answer for both cases:

 function getData(aaData){ // aaData -> data obtained from server var returnData = new Array(); $.each(aaData, function(index,rowData){ var row = new Object(); if(firstRadioBtn){ row['column1_data'] = rowData['label']; row['column2_data'] = rowData['type']; }else{ row['column1_data'] = rowData['sourceLabel']; row['column2_data'] = rowData['targetLabel']; } row['id'] = rowData['id']; returnData.push(row); }); return returnData; } 

This is how I solved it. I would like to know if this is good ...

Suggestions are always welcome !!!

~ Ragesh