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
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>'; }
},
]
});
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.