dynamically add a column to Datatables

Question

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

stackoverflow.com/questions/38111245/…

hawkstrider
– hawkstrider

2019-01-03 16:56:56 +00:00
Commented Jan 3, 2019 at 16:56 — hawkstrider
– hawkstrider, Commented Jan 3, 2019 at 16:56

Md.Sukel Ali · Accepted Answer · 2019-01-03 17:21:21Z

4

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>'; }
         },
    ]
});

answered Jan 3, 2019 at 17:21

Md.Sukel Ali

3,0655 gold badges26 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Assad Nazar Over a year ago

what can we do if we have to check for permissions for actions. If yes then show the column. I tried by checking permissions in render function which is returning empty column in case of null returned or empty returned. Only way for me is to check permission before defining the column i.e. before {}. Is it the only approach?

user2560539 · Accepted Answer · 2019-01-03 17:22:04Z

This is based on example found here

function Person( firstname, lastname, age ) {
    this._firstname = firstname;
    this._lastname  = lastname;
    this._age       = age;
 
    this.firstname = function () {
        return this._firstname;
    };

    this.lastname = function () {
        return this._lastname;
    };
    
    this.age = function () {
        return this._age;
    };
    
    this.link = function () {
        return '<a href="linkto...'+this._age+'">linkto...'+this._age+'</a>';
    };
 
}
 
 
$(document).ready(function() {
    var table = $('#example').DataTable({
        columns: [
            { data: null, render: 'firstname' },
            { data: null, render: 'lastname' },
            { data: null, render: 'age'  },
            { data: null, render: 'link' }
        ]
    });
 
    table.row.add( new Person( 'Airi', 'Satou', 33 ) );
    table.row.add( new Person( 'Angelica', 'Ramos', 47 ) );
    table.row.add( new Person( 'Ashton', 'Cox', 66 ) );
    table.draw();
} );

<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" style="width:100%">
</table>

Collectives™ on Stack Overflow

dynamically add a column to Datatables

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related