jquery-bootgrid, как отформатировать ответ ajax
Я использую jQuery-Bootgrid для форматирования моих таблиц. Теперь я хочу перейти к следующему шагу и загрузить данные таблицы через Ajax. После этого я хочу отфильтровать данные таблицы, проверив некоторые параметры и отправив выбранные параметры через ajax в URL. И это по выбору варианта.
Проблема, с которой я столкнулся, заключается в том, что каждый раз, когда загружается ответ ajax, все данные отображаются в таблице, строки не могут быть выбраны, и когда я выполняю поиск с помощью функции поиска по таблице, таблица показывает все данные.
Без Ajax все работает нормально, но я не могу изменить данные таблицы при изменении выбранных опций.
HTML
<div class="table-responsive">
<table id="grid-editTable" class="table table-condensed table-hover table-striped table-bordered" data-selection="true" data-row-select="true" data-keep-selection="true">
<thead>
<tr>
<th data-column-id="id" data-visible="false" data-visible-in-selection="false"> ID</th>
<th data-column-id="Pos" data-visible="false" data-identifier="true" > Pos.</th>
<th data-column-id="commands" data-width="40%" data-formatter="commands" data-sortable="false" > Command</th>
<th data-column-id="nr" data-width="5%" data-header-css-class="nowrap"> Number </th>
<th data-column-id="data2" data-width="5%" data-formatter="data2" data-header-css-class="nowrap"> Data 2 </th>
<th data-column-id="data3" data-width="50%"> Data 3 </th>
</tr>
</thead>
</table>
</div>
<div class="row">
<div class="col-xs-12">
<div class="input-group">
<select class="selectpicker form-control filterTable" multiple id="filterStatus" title="Status..." data-selected-text-format="count > 3" data-live-search="true" data-size="7">
<option value="1">1</option>
<option value="1">2</option>
<option value="0">3</option>
<option value="0">4</option>
<option value="0">5</option>
<option value="0">6</option>
</select>
<span class="input-group-addon">
<abbr title = "?">
<i class="glyphicon glyphicon-info-sign"></i>
</abbr>
</span>
</div>
</div>
</div>
JQuery:
<script>
var edit_table_hanlder = $("#grid-editTable");
function init_edit_table(){
var edit_table = edit_table_hanlder.bootgrid({
ajax: true,
post: function (){
/* To accumulate custom parameter with the request object */
return {
id: "b0df282a-0d67-40e5-8558-c9e93b7befed"
};
},
url: function (){
var filterStatus = $("#filterStatus").val();
return "get_ajax/filter_table.php?status=" + filterStatus;
},
selection: true,
rowSelect: true,
rowCount: [10, 25, 50, -1],
pagination: 'pagination pagination-sccess',
formatters: {
"commands": function(column, row){
return "<div class=\"nowrap\">" + "<button type=\"button\" id=\"printpdf\" class=\"btn btn-xs btn-default print-pdf\" + data-row-id1=\"" + row.id + "\" ><span style=\"font-size:10px;\" class=\"fa fa-file-pdf-o \"></span></button> " + "<button type=\"button\" id=\"see\" class=\"btn btn-xs btn-success command-see\" + data-row-id1=\"" + row.id + "\" ><span style=\"font-size:10px;\" class=\"fa fa-eye \"></span></button> " + "<button type=\"button\" id=\"edit\" class=\"btn btn-xs btn-primary command-edit\" + data-row-id1=\"" + row.id + "\" ><span style=\"font-size:10px;\" class=\"fa fa-pencil \"></span></button> " + "</div>";
}
}
});
}
function reload_edit_table(){
var filterStatus = $("#filterStatus").val();
edit_table_hanlder.bootgrid("reload");
}
$('.filterTable').on('change', reload_edit_table);
</script>
Filter_table:
$status = htmlspecialchars_decode($_GET['status']);
$sql = "SELECT *
FROM tabledata
WHERE tabledata.id > 0 ";
if($_GET['status'] != ""){
$sql .= " AND tabledata.status IN ($status)";
}
$table_result = mysqli_query($link, $sql);
$i = 1;
while ($row = mysqli_fetch_array($table_result, MYSQL_ASSOC)) {
$data[] = array(
"id" => $row["id"],
"Pos" => $i,
"commands" => "",
"nr" => $row["nr"],
"data2" => $row["data2"],
"data3" => $row["data3"],
);
$i++;
}
$output = array(
'current' => intval(1),
'rowCount' => [10, 25, 50, -1],
'total' => intval($i)-1,
'rows' => $data,
'selection' => true,
'rowSelect' => true
);
echo json_encode($output);
Итак, как должен выглядеть мой ответ Ajax? А как перезагрузить загрузочную сетку для этой таблицы после каждого выбора новой опции?