How to Generate Column via Loop Function?

hooix0013

I need to generate column with for loop inside the Column Object. Is it possible to do it in Datatables?
This is what I want to achieve to generate the column base on the element in the MonthList:

"columns": [
                { 'data': 'ID', "className": "text-center" }, 
                { 'data': 'ID', "className": "text-center" }, 
                { 'data': 'ID', "className": "text-center" },
                function GenerateColm() {
                    for (var i = 0; i < MonthList[i].length; i++) {
                        title: MonthList[i],
                        className: "text-center",
                        orderable: false,
                        data: null,
                        defaultContent: '',   
                    }
                }
            ]

To Have a function like GenerateColm() in the columns object or any other alternative way to generate the column with the MonthList. Any Help is Appreciated!

kthorngren

Sounds like columns.render is what you want to use.

Kevin

allan

Actually, if I've understood correctly, then you want to add multiple columns in the columns array? If so, yes it is quite possible, but not like that, as it is invalid Javascript.

Create an array:

let columns = [
  { 'data': 'ID', "className": "text-center" },
  { 'data': 'ID', "className": "text-center" },
  { 'data': 'ID', "className": "text-center" }
];

Then add any columns you want to it:

columns.push({
  {data: 'column4', className: 'text-center'}
});

Put that in a loop if you need.

Then assign the columns array:

$('#myTable').DataTable({
  columns: columns,
  // ...
});

Allan

hooix0013

@allen yupp what I want is something you posted. Thanks for giving me idea. However, what i have done is as below, I first declare the pre-defined columns and then generate another array which 'title' will be get once data retrieved. Then I merge the oriCol and addedCol as my column:

let oriCol = [
            {
                class: 'details-control',
                orderable: false,
                data: null,
                defaultContent: '',
            },
            { 'data': 'ID', "className": "text-center" }, 
            { 'data': 'ID', "className": "text-center" }, 
            { 'data': 'ID', "className": "text-center" }, 
            { 'data': 'ID', "className": "text-center" }, ]

Here I generate another array

//To Populate Array of Month fro the list
                    for (var i = 0; i < MonthList.length; i++) {
                        addedCol.push({
                            title: MonthList[i],
                            className: "text-center notexport",
                            orderable: false,
                            data: null
                        });
                    }

Then Merge them together

//To Merge Two Array
oriCol = oriCol.concat(addedCol);

Assign into columns

"columns": oriCol,

The predefined part works well when the datatable rendered, However the addedCol part was not able to render. Is there something wrong with the code? When I console I am able to saw the whole array value but for some reason the addedCol part can't be rendered.

colin

It would help if you could post a test case demonstrating the issue. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

hooix0013

http://live.datatables.net/kemefive/1/edit?html,js,output
Here's my latest example code. I was trying to add the columns dynamically base on the MonthList via for loop to append the th element. However it's not working.

hooix0013

FYI, I know if the MonthList is declare outside the datatable, it is able to populate the columns. But the MonthList will only generated in dataSrc in my case. So I cant run the for loop outside the datatable since it cannot read MonthList

colin

Tbh, I'm not clear what you're trying to do here. That loop in dataSrc is attempting to add to the table header. Can you explain please what the final goal is.

Colin

kthorngren

You will need to get the column information before initializing Datatables. See this example:
http://live.datatables.net/qimukefe/1/edit

It sends a jQuery ajax() first to fetch the columns and builds it in the success function. The example uses the same URL as the ajax option. This is due to limitations of what is available on the server side. You will use a different URL that just collects the column information.

Kevin

hooix0013

@colin Sorry for unclear clarifying. What I want to achieve is that to dynamically add new columns based on the MonthList. My ajax will call some data which will be sorted as the initial columns. Then I will be sorting the data from the ajax call to form another array which is MonthList. And base on MonthList, generate new columns. That's why I use Append in the table to dynamically add MonthList's data into the existing columns.

allan

Thanks for the clarification. You'd need to take the approach used in Kevin's example. DataTables does not have an API to add additional columns after initialisation. They need to be setup for initialisation.

Allan