mRenderProp не возвращает кнопку

Я создаю приложение CRUD, которое выполняется на серверной обработке таблиц данных, мне удалось динамически сгенерировать таблицу, но когда я пытаюсь создать нажимную кнопку для просмотра дополнительной информации, она дает сбой и показывает только уникальный идентификатор.
Посоветуйте, пожалуйста, что я не правильно делаю в mRenderProp?
Ниже мой скрипт, который генерирует таблицу данных:

<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>