Here is my Jquery Server Side DataTable set up, correctly returning data from my database and the filtering does actually work, but the problem is that the selection box for each column only shows values off the first page of data.
And i m using mysql database for this
Phalcon PHP Controller Action :
public function getJsonBOMuploadAction($dummy) {
if ($this->request->isAjax()) {
$this->setJsonResponse();
$request = $this->request;
$p_draw = $request->getPost("draw");
$p_start = $request->getPost("start");
$p_length = $request->getPost("length");
$p_search = $this->GetSearchString($request->getPost("search"));
$p_col_search = $this->GetSearchString($request->getPost("columns"));
try {
$data = CallableRoutine::getDocumentRouterList($p_start
, $p_length, $p_search, intval($p_col_search[0])
, $p_col_search[1], $p_col_search[2]);
} catch (Exception $ex) {
return $ex;
}
$count = $data[count($data) - 1]["id"];
array_splice($data, count($data) - 1);
return Array("data" => $data,
"draw" => $p_draw,
"recordsFiltered" => $count,
"search" => $p_search,
"col_search" => $p_col_search,
"recordsTotal" => $count);
}
}
Jquery Code :
vm.initExampleDocrouterDatatable = function() {
$('#example_docrouter').DataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": "./product_bom/getJsonBOMupload",
"type": "POST"
},
"columns": [
{"data": "id"},
{"data": "name"},
{"data": "description"}
],
// ==============================================================
// ====== Column filter code reference:
// ====== https://datatables.net/examples/api/multi_filter_select
initComplete: function () {
this.api().columns().every( function () {
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
}
});
};
Here Is My HTML :
<table id="example_docrouter" class="table row-border hover table-responsive display nowrap table-bordered">
<thead>
<tr>
<th class="thbg thead-css">ID</th>
<th class="thbg thead-css">Name</th>
<th class="thbg thead-css">Description</th>
</tr>
</thead>
<tfoot class="noprint">
<tr>
<th class="thead-css">ID</th>
<th class="thead-css">Name</th>
<th class="thead-css">Description</th>
</tr>
</tfoot>
<tbody></tbody>
</table>