Server Side Ajax Datatables - php

Question

I am executing serverside datatables and im getting this kind of error
TypeError: c is undefined
...iRecordsDisplay=parseInt(f,10);d=0;for(e=c.length;d<e;d++)N(a,c[d]);a.aiDisplay=...
this is my server side,
require_once '../../resources/db.config.php';
$db = DATABASE::instance();
$mysqli = $db->get();
$result = $mysqli->query("SELECT * FROM mst_product");
$rows = array();
while( $r = $result->fetch_assoc() ){
$rows[] = $r ;
}
header('Content-type: application/json');
echo json_encode($rows, JSON_PRETTY_PRINT);
and my datatables
<table id="productlist" class="table">
<thead>
<tr>
<th>No</th>
<th>SKU</th>
<th>Product Description</th>
<th>Product Price</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
$(function () {
$("#productlist").DataTable({
"destroy": true,
"processing": true,
"serverSide": true,
"ajax": {
"url": "../../../html/data/productlist.php",
"type": "POST"
},
"columns": [
{ "data": "prod_id" },
{ "data": "prod_sku" },
{ "data": "prod_desc" },
{ "data": "prod_prc_idr" }
]
});
});
</script>
and my imports,
<!-- DATA TABLES -->
<link href="../../library/plugins/datatables/media/css/dataTables.bootstrap.min.css" rel="stylesheet" type="text/css"/>
<!-- DATATABLES -->
<script src="../../library/plugins/datatables/media/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="../../library/plugins/datatables/media/js/dataTables.bootstrap.min.js" type="text/javascript"></script>
please help me i dont know where i am doing wrong .... JSON data service is fine...