Dynamically adding / removing columns

Question

I use datatables 1.10 for a while now, and I have come to a point in my development where I have a table in my db that stores a json object. Furthermore that table also contains an attribute called groupName. As the name suggests, the entries of that table are "grouped" by that attribute, and in that group, the json object has the same attributes.

Here an example of how my database table looks like:

+---------------------------------------------------------------------------+
|id|groupname                   |json                                       |
+---------------------------------------------------------------------------+
|01|group1                      |{"key1":"value1","key2":"value2"}          |
|02|group1                      |{"key1":"foo","key2":"bar"}                |
|03|group2                      |{"kex1":"foo1","keyab":"bar2","key1":"foo"}|                                               
+---------------------------------------------------------------------------+

My page that contains the datatabase, and also has a dropdown menu populated with the group names which filters the the datatable for the particular group. The jsonObject of that filtered group is being displayed as a raw json string.

What I'm trying to do now is to parse my jsonObject, get the keys and populate them in the datatable as columns. The values of the jsonObject are displayed in the columns accordingly.

Where or how do I reinitialize the datatable, providing it with the proper column names?

Chirag Arora · Accepted Answer · 2019-08-30 06:53:52Z

1

Can you please share some example of your JSON object. Thanks! Any ways what you can do is to to take the keys of the json object and put them into array then using loop you can make a string of columns. Then you can provide an id to of the table and append the string into the table.

let keys = Object.keys(YOUR_JSON_OBJECT);
let text = "";
for(let i =0;i<keys.length;i++){
text+= ["<tr>","<td>",YOUR_JSON_OBJECT.its_key,"</td>","</tr>"].join("");
}
$('table thead').html(text);

See if this works!

answered Aug 30, 2019 at 6:53

Chirag Arora

3573 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamically adding / removing columns

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related