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

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

minnieminnie Posts: 17Questions: 2Answers: 0

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

Answers

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

  • minnieminnie Posts: 17Questions: 2Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • minnieminnie Posts: 17Questions: 2Answers: 0

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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    edited August 2017

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

    Allan

  • minnieminnie Posts: 17Questions: 2Answers: 0

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

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

    Allan

  • minnieminnie Posts: 17Questions: 2Answers: 0

    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.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    edited September 2017

    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

  • minnieminnie Posts: 17Questions: 2Answers: 0

    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+'"/>'
    }
    }

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • minnieminnie Posts: 17Questions: 2Answers: 0

    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%

    )}

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • minnieminnie Posts: 17Questions: 2Answers: 0

    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 ?

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • minnieminnie Posts: 17Questions: 2Answers: 0

    Let me try... Thanks!!

  • minnieminnie Posts: 17Questions: 2Answers: 0

    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. ??

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • minnieminnie Posts: 17Questions: 2Answers: 0

    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.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • minnieminnie Posts: 17Questions: 2Answers: 0

    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.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • minnieminnie Posts: 17Questions: 2Answers: 0
    edited October 2017

    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
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

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

    Allan

  • minnieminnie Posts: 17Questions: 2Answers: 0

    Yea. It keeps adding more column.

  • minnieminnie Posts: 17Questions: 2Answers: 0

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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • minnieminnie Posts: 17Questions: 2Answers: 0

    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??

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

This discussion has been closed.