How to make columnDefs merge/ignore columns dynamically
How to make columnDefs merge/ignore columns dynamically
HollaBigJ
Posts: 6Questions: 1Answers: 0
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,
});
}
This question has accepted answers - jump to:
Answers
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
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:
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):
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.
Not sure if this is what you are after:
http://live.datatables.net/roqicile/1/edit
I changed
testto an object:The
metaparameter ofcolumns.rendercontains the column number. Use that to get the appropriate columns fromtest.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
Thanks buddy, I will try that: key, value.
The live website doesn't work btw.
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
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:
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?
See the
columnDefs.targetsdocs for the options.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
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)
Maybe you are looking for something like this:
https://jsfiddle.net/0ezqatnL/
This uses
columns.visibleto hide the columns being merged, only Position in the test case. If you have object data then you can skip definingcolumns.datafor the columns you are merging as long as they are part of the row data.Kevin
Hey, I forgot to let you know that I figured out on merged headers.
Please go ahead close this. Much obliged!