Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

dynamically add a column to Datatables

I'm have a js datatable with json content in front of me

$('#data').DataTable( {
     data: data,
     columns : [ 
         { data: "number" },
         { data: "firstname" }, 
         { data: "lastname" }
    ]
});

the datatable itself fills itself as intended. However, I'd like to add another column at the end of the table which is not quite part of the data I get. Let's say I want to add a button or a link there.

is there a quick way to add another column and use the data (eg. number)?

Desired resault for the table:

Number | Firstname | Lastname | Action
001    | John      | Doe      | link to ...page?nr=001
023    | Jane      | Doe      | link to ...page?nr=023
like image 679
lechnerio Avatar asked Aug 22 '26 19:08

lechnerio


1 Answers

This code might do your work,

$('#data').DataTable( {
     data: data,
     columns : [ 
         { data: "number" },
         { data: "firstname" }, 
         { data: "lastname" },
         {
             "data": null,
             "render": function ( data, type, row, meta ) {
               return '<a href="'+data['number']+'">View Detail</a>'; }
         },
    ]
});
like image 50
Md.Sukel Ali Avatar answered Aug 25 '26 08:08

Md.Sukel Ali



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!