mRenderProp not returning the button - php

Question

I am building a CRUD application which runs on Data-tables server-side processing, I managed to generate the table dynamically but when I try to create a click-able button for viewing more information, it fails and only shows the unique identifier.
Please advise what am I not doing correctly at the mRenderProp?
Below is my script that generates the data-table :
<script type="text/javascript">
$(document).ready(function () {
Draw();
function Draw() {
$('#example_ta').dataTable({
"bJQueryUI": true,
"bautoWidth": false,
"aoColumns": [
{"sTitle": "Delivery Date", "mDataProp": "delivery_date"},
{"sTitle": "Delivery No.", "mDataProp": "delivery_no"},
{"sTitle": "Unit Code", "mDataProp": "unit_code"},
{"sTitle": "Driver Code.", "mDataProp": "driver_code"},
{"sTitle": "Zone Name.", "mDataProp": "zone_name"},
{"sTitle": "Zone Rate", "mDataProp": "zone_rate"},
{"sTitle": "Tonnage", "mDataProp": "tonnage"},
{"sTitle": "Standard Tonne", "mDataProp": "standard_tonne"},
{"sTitle": "View", "mDataProp": "delivery_id",
"mRenderProp": function (data, type, full) {
return '<button class="show-data btn btn-small btn-primary" id = ' + data + ' >View</button>';
}
},
],
"bDeferRender": true,
"bProcessing": true,
"bDestroy": true,
"bLengthChange": true,
"iDisplayLength": 10,
"sAjaxDataProp": "",
"sAjaxSource": '<?php echo site_url() . "admin_profile/getDeliveries/"; ?>',
"aaSorting": [[3, "asc"]]
});
}
});
</script>
<table class="example_ta" id="example_ta">
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr></tr>
</tbody>
</table>

Answer 1

It's just mRender not mRenderProp - see docs
{"sTitle": "View", "mDataProp": "delivery_id",
"mRender": function (data, type, full) {
return '<button class="show-data btn btn-small btn-primary" id = ' + data + ' >View</button>';
}