How to make columnDefs merge/ignore columns dynamically

HollaBigJ

This is a snippet code, not entirely. Main focus is on columnDef render, how do you make it dynamically columnDef render to merge/ignore columns.

This render only show the last index on the value. IE [5,6]. With your help will be greatly appreciated.

    var test = [
        [0, 1],
        [2, 3, 4],
    [5, 6]
    ]

    "success": function(result) {
           for (var i in test2) {
                       var arrTest = test2[i];

                       coldef.push({
                                   render: function(result, type, row) {
                                               var str = '';
                                               var test = [];

                                               for (var [key, value] of Object.entries(row)) {
                                                          test.push(value);
                                               }

                                               for (var j in arrTest) {
                                                        str += '<br> (' + test[arrTest[j]] + ')';
                                               }

                                                        //return result + '<br> (' + test[3] + ')';
                                               return result + str;
                                    },
                                    targets: arrTest[0],
                        },);
           }
           
           $('#example').DataTable({
                         "data": result,
                         "columns": col,
                         "columnDefs": coldef,
           });
    }

kthorngren

I'm not clear on what you are trying to do. Are you trying to have a variable number of columns in each row? Datatables doesn't support this. See the HTML requirements.

Maybe you can show us an example of your data and explain how you want it displayed. The code snippet doesn't provide enough detail.

Kevin

HollaBigJ

No, I'm speaking of dynamically merge columns. Referring to this:

https://www.datatables.net/examples/advanced_init/column_render.html

Unfortunately, this is hardcoded and we don't want that.

Let's look at this part:

var test = [
    [0, 1],
    [2, 3, 4],
    [5, 6]
]

This array is telling columnsDef which columns that we want to merge and which targeted column to put merged values in.

0 is the targeted column and 0 and 1 that I want to merge columns. Thereafter, 2 is a targeted column and 2, 3, 4 to merge. And so forth.

How do you make it dynamically without hardcoded the number IE row[3] <-- which I do not want.

for example I want this (injected array from in above):

        {
               render: function(result, type, row) {
                       return result + '<br> (' + test[1] + ')';
               },
               targets: 0,
       },
       {
               render: function(result, type, row) {
                       return result + '<br> (' + test[3] + ')' + '<br> (' + test[4] + ')';
               },
               targets: 2,
       },
       {
               render: function(result, type, row) {
                       return result + '<br> (' + test[6] + ')';
               },
               targets: 5,
       },

These are hard coded which I do not want. How do you make it dynamically that derived from the array?

And no, I do not want name.lastname because this is hardcoded either.

kthorngren

Not sure if this is what you are after:
http://live.datatables.net/roqicile/1/edit

I changed test to an object:

  var test = {
    0: [1],
    2: [3, 4],
    4: [5]
  }

The meta parameter of columns.render contains the column number. Use that to get the appropriate columns from test.

This solution won't work if your row data is using objects, ie, columns.data. Instead of array indexes you will need the object key.

Kevin

HollaBigJ

Thanks buddy, I will try that: key, value.

The live website doesn't work btw.

kthorngren

It uses HTTP. Your browser is probably trying to use SSL and changing to HTTPS. Try a different browser. I moved the code to jsfiddle:
https://jsfiddle.net/smau1ovx/

Kevin

HollaBigJ

I didn't catch the http part, makes sense. Thanks for pointing it out.

Yes, that's it. It worked out great on my end. The part that I had ah ha moment:

   targets: [0, 2, 4],

I initially thought that we only can use one number on targets at a time. I didn't know the array can support that.

I owe you a beer if we ran into each other.

On side note: is it possible to have different column(s) name add to target merged column.

Like for example:

first name | last name | address | phone number

merge it into:

first name | address | phone number
(last name) |

Is it possible?

kthorngren

I initially thought that we only can use one number on targets at a time

See the columnDefs.targets docs for the options.

is it possible to have different column(s) name add to target merged column.

Sorry I'm not sure I understand the question. Are you asking about complex headers, like this example? You can create the header in any format you want. You just need to have one header row with a -tag th` for each column as described in the example.

Kevin

HollaBigJ

My bad. Yes about the headers and no.

The complex header looks like require to have hard coding on HTML. Hard coding is still a big no no on my end.

We are able to merge the columns and its row values to a targeted column.

What about the headers, can it merge headers into one header column?

| first name | last name | phone number | etc

suppose we want to merge first and last name header into one header column to "first name" header column with "last name" beneath of "first name":

| first name | phone number | etc
(last name)

kthorngren

Maybe you are looking for something like this:
https://jsfiddle.net/0ezqatnL/

This uses columns.visible to hide the columns being merged, only Position in the test case. If you have object data then you can skip defining columns.data for the columns you are merging as long as they are part of the row data.

Kevin

HollaBigJ

Hey, I forgot to let you know that I figured out on merged headers.

Please go ahead close this. Much obliged!