Data is not Loaded on bootstrap-table using php ajax - php

Question

i am creating a simple crud system while i loading the data data is not loaded. but i got the data from the all_category.php successfully.i checked through console.log
0: {id: 65, catname: "sad", status: 1}
1: {id: 62, catname: "Pepsi", status: 1}
2: {id: 60, catname: "Mobile", status: 1}
what i tried tried so far i attached code below. i tried this for 2 days but couln't solve this . data is not passing to the table . i attached the screen shot image below
Form design of the table
<table id="tblCenters" data-toggle="table" data-show-refresh="true"
data-show-toggle="true" data-show-columns="true" data-search="true"
data-select-item-name="toolbar1" data-pagination="true" data-sort-name="aid"
data-sort-order="desc">
<thead>
<tr>
<th data-field="catname" data-sortable="true">Category</th>
<th data-field="status" data-sortable="true">Status</th>
<th data-field="opt" data-sortable="true">Edit</th>
</tr>
</thead>
<tr>
</tr>
</table>
Jquery
function get_all() {
$.ajax({
type: 'POST',
url: 'all_category.php',
dataType: 'json',
success: function (data) {
console.log(data);
$('#tblCenters').bootstrapTable('removeAll');
for (var i = 0; i < data.length; i++) {
var btnCell = '<button id="u' + data[i][0] + '" type="button" class="btn btn-success btn-xs" onclick="updateAcc(this)">Edit</button>';
addRow(data[i][1], data[i][2], btnCell);
}
}
,
error: function (data) {
console.log(data);
}
});
function addRow(catname,status,cell) {
$('#tblCenters').bootstrapTable('insertRow', {
index: 1,
row: {
catname: catname,
status:status,
opt:cell
}
});
}
all_category.php
<?php
include("db.php");
$stmt = $conn->prepare("select id,catname,status from category order by id DESC ");
$stmt->bind_result($id,$catname,$status);
if ($stmt->execute()) {
while ( $stmt->fetch() ) {
$output[] = array ("id"=>$id, "catname"=>$catname,"status"=>$status);
}
echo json_encode( $output );
}
$stmt->close();