I need to dynamically add a new column after clicking on a hyperlink in datable.

minnie

I need to dynamically add a new column after clicking on a hyperlink value of a cell in datable.

Inside document .Ready i am adding new columns. After table gets rendered user clicks on the hyperlink data in a datatable. Inside on click function i have given Ajax call.. the Ajax call success method returns additional columns.How to add these new columns and value to the existing columns of a table

kthorngren

You can't just add new columns to an existing Datatable. The destroy() would be used to create a new Datatable with the new columns.

Kevin

minnie

I want the old table values .if i destroy it then my table data will be lost. I want the new columns and values to be appended to the existing one. Could you please help me with this

kthorngren

Like I said you can't just add new columns. However you can have hidden columns then assign the data and unhide as needed.

Kevin

allan

if i destroy it then my table data will be lost.

No it won't. The old table will still exist in the DOM.

As Kevin says you need to destroy the old table and then manipulate its structure to add the columns you want and initialise it as a new DataTable.

There is no option to dynamically add columns to a DataTable.

Allan

minnie

Thanks Alan and kevin..
Please tell me how to get column index based on the column name??

allan

column().index() in combination with a name selector - see the column-selector documentation.

Allan

minnie

Thanks . I will check..
I have a new issue in datatable now. I need to set an image in a column for all the rows and that image is taken from rest webservice. Based on an id the image is taken from service. While rendering the table i have made an Ajax request inside fnrowcallback and fetching the image from service and displaying. Ajax async as true.

But when i set the image the header is misaligned to the image column value.

Code snippet:

Fnrowcallback: function (nRow, adata){
URL: /images/
Content: aData[Id]
$.ajax({
Type: post,
Data: content,
URL: URL,
Success: function(output){
$('td(2)',nRow).Html('<IMG src=data:image/PNG;base64,'+output+'"/>'
}
}
Please help

allan

Use a data renderer. See also columns.render which has examples.

Allan

minnie

Hi Allan,
Instead of giving it in rowcallback i tried in columns.render
But i am not able to set the image in the column. Not sure what i am doing wrong here .

Columndef(
Title: "image",
Data:"loading",
Render: function( data, type, row) {
Var url;
If(type=== display){
$.ajax({
Type: post,
URL: /getImage,
Content: row[ID],
Success: function (output){
return '<img src=data:image/PNG;base64,'+output+"'>;
}
});
}

}

Image is taken from webservice based on the id that is in the actual response.
For all the rows based on the respective id the image will be taken. Output contains the encoded image. But
It is not rendering the image in the column. Not sure what is wrong.

allan

The function executed by render is returning undefined. Remember that Ajax is async.

I haven't fully realised that you need an Ajax call for every image display. Perhaps rowCallback would be best in that case - although I would suggest you implement a cache buffer so you don't request the same image multiple times.

Allan

minnie

I have enabled autowidth option in datatable. My columns are dynamically created . The image column won't have any value in the actual response. So the image column header will be smaller in size while rendering the header. I believe the rowcallback is getting called while rendering each row.Here the problem is after rowcallback is called the Ajax method returns the success response and it sets the image in the image column. But the header and the value are not aligned properly.

fnrowcallback: function (nRow, adata){
URL: /images/
Content: aData[Id]
$.ajax({
Type: post,
Data: content,
URL: URL,
Success: function(output){
$('td(2)',nRow).Html('<IMG src=data:image/PNG;base64,'+output+'"/>'
}
}

allan

Do you know what size your images will be in advance? You could force the column to be that width. If you don't then you'd need to call columns.adjust() once the images have been rendered.

Allan

minnie

Ya all the images will be in same size. Since autowidth is enabled if i explicitly specify width for image column it is not reflecting.
Tried like this..
Columndef({
Width: 20%

)}

allan

You'll probably need to have a div in the element which forces the correct width. The browser will automatically shrink the column if there is no data inside it I'm afraid.

Allan

minnie

I will try this Allan.. u suggested me to implement cache buffer. I am not sure how to save the image in cache and retrieve it. Can you share me any example if you have ?

allan

I don't have an example - I'd need to write one, which I could do under the support options, but basically I would suggest you just store each image in an object. Check the object before making the Ajax request to see if it has already been retrieved from the server.

Allan

minnie

Let me try... Thanks!!

minnie

Alan,
You said the old table value still exist in Dom when i destroy the table. But we have to use table.empty to dynamically add new columns . Will the old table values be present in Dom even after emptying the table. If so how do i get the value back in datatable. ??

allan

I don't fully understand the question I'm afraid. Kevin and I were meaning that when you use destroy(), by default it will leave the table in the document - here is a little example: http://live.datatables.net/xegizofe/1/edit .

Allan

minnie

Let me try to explain my scenario..

Datatable column header and values are dynamic in my case.
These column header and values are fetched from multiple webservices in java side code and returned to jsp as json response. Using the json response i am rendering the table.
I have a scenario where one of the webservice let say webservice 3 returns a batch id.

My datatable looks like this now.

Colhdr 1 colhdr2 colhdr3
0.1. 0.2. Batchid

Calculation will be done in the background for the batch id. To collect the actual response of webservice 3 i have to call webservice 4 by passing the batch id. So here i am using Ajax call to webservice 4 to fetch the actual Response.

My actual table should look like this after the batch id calculation is done in the background.

Colhdr1 colhdr2 colhdr3 colhdr4
0.1. 0.2. 0.3. 0.4

Colhdr1 was from webservice 1, colhdr2 from webservice 2, colhdr3 and colhdr4 from webservice 4 .

Colhdr1 and colhdr2 values are already rendered initially. Two New columns has to be rendered here along with the old one.

Since webservice 1 and 2 already gave me the expected answer i don't want to call those webservices again for rendering the new datable incase if i have to destroy the table for adding new col and values that was returned from webservice 3.

allan

Do you want the same table to show those three different tables, depending on a user selection? Why not just have three different DataTables?

Allan

minnie

User will select multiple webservices it may be 10 and the output has to be rendered in the same table because i have to give the option for exporting to excel and sorting columns. Like i said before The problem here is one or two webservice will give me direct answer but the other webservices may give me batch id. This initial output has to be rendered in a table. After some specific interval my Ajax call checks the batch calculation had completed or not. If it is completed then it has to return the batchid output in the same table (output will have additional columns) .

I may not understand your question properly. Please point to me an example may be I ll get some idea.

allan

Oh I see - thanks - I haven't quite got it before.

So a single table, with a row for each batch id, and the data won't initially be available for each batch id.

What I would suggest for that is initialising the table as if the full data set would be there, but use columns.defaultContent to show 'Loading...' or similar for the data that hasn't yet been loaded. Then when the data has been loaded, use row().data() to set the row's data.

Allan

minnie

Thanks allan for your response.
i believe rows.data is to set the value to the row.
But the batch id calculation response will return new columns as well. those columns will be dynamic.

my initial table:

column1     column2   column3
 1.0          2.0         Loading

After batchid calculation dynamic columns will be added column3, column4 and column5 .

Now my table should look like this

column1     column2     column3  column4   column5
1.0             2.0             4.0         5.0            6.0

allan

Can you initialise it with 5 columns initially? Or does it just keep adding more and more columns?

Allan

minnie

Yea. It keeps adding more column.

minnie

I cannot initialize it in the begining because it keeps adding more columns.

allan

Ah okay - I hadn't realised that. I'm afraid that DataTables doesn't have an option to dynamically add (or remove) columns at this time, so you would need to destroy the existing table (destroy()) and then add another column in the HTML using jQuery / DOM methods (i.e. insert another cell for every row in the table) and initialise a new DataTable.

Allan

minnie

Hi Allan,
Many thanks for your previous help..
I have two new issues in datatable. Ur help is appreciated..
Issue1: I need to export image to excel . How can i do that??
Issue 2: i have a name which is a hyperlink in the table.. when i export to excel i am getting only the text not the link.. how do i achieve it??

allan

Issue1: I need to export image to excel . How can i do that??

There isn't a built in option for that. You would need to use the customize option of the excelHtml5 button type, and also read up the Open Spreadsheet specification on how to embed images.

Issue 2: i have a name which is a hyperlink in the table.. when i export to excel i am getting only the text not the link.. how do i achieve it??

The same as above applies here. It isn't a built in feature of the Excel export.

Allan