jquery datatables: adding extra column
You can define your columns in a different waylike this
"aoColumns": [ null, null, null, null, null, { "mData": null } ]
or this
"aoColumnDefs":[ { "aTargets":[5], "mData": null }]
Here some docs Columns
Take a look at this DataTables AJAX source example - null data source for a column
Note that prior to DataTables 1.9.2 mData was called mDataProp. The name change reflects the flexibility of this property and is consistent with the naming of mRender. If 'mDataProp' is given, then it will still be used by DataTables, as it automatically maps the old name to the new if required.
Another solution/workaround could be adding that '5' parameter...
For example adding extra ""
to each row
like this:
[ "IT", "10030", "VILLAREGGIA", "TO", "Torino", "" ], [ "IT", "10030", "VISCHE", "TO", "Torino", "" ]
Just in case anyone using a newer version of DataTables (1.10+) is looking for an answer to this question, I followed the directions on this page:
Posting this answer here, just to show that where the aoColumnDefs
needs to be defined. I got help from this question it self, but I struggled for a while for where to put the aoColumnDefs
. Further more also added the functionality for onclick event.
$(document).ready(function() { var table = $('#userTable').DataTable( { "sAjaxSource": "/MyApp/proctoring/user/getAll", "sAjaxDataProp": "users", "columns": [ { "data": "username" }, { "data": "name" }, { "data": "surname" }, { "data": "status" }, { "data": "emailAddress" }, { "data" : "userId" } ], "aoColumnDefs": [ { "aTargets": [5], "mData": "userId", "mRender": function (data, type, full) { return '<button href="#"' + 'id="'+ data + '">Edit</button>'; } } ] } ); $('#userTable tbody').on( 'click', 'button', function () { var data = table.row( $(this).parents('tr') ).data(); console.log(data); $('#userEditModal').modal('show'); });} );