Today, We want to share with you DataTable Custom Filter Server Side.In this post we will show you Datatables custom filtering with server side, hear for Add Server-side DataTables Custom Filter using PHP with Ajax we will give you demo and example for implement.In this post, we will learn about Implement custom multicolumn server-side filtering in jQuery dataTables with an example.
DataTable Custom Filter Server Side
There are the Following The simple About DataTable Custom Filter Server Side Full Information With Example and source code.
As I will cover this Post with live Working example to develop Add custom Filter for server side Processing, so the Create Custom Dropdown Server Side Filter in Datatables for this example is following below.
HTML Table Source Code
JS Source Code
ToReceiveTable = $("#MerchantCatalogs").dataTable({
"processing": true,
"serverSide": true,
"order": [[ 6, "asc" ]],
"pageLength": 50,
"ajax": "ajax?MerchantCatalogs=yes"
});
The Above one is ordinary ServerSide Processing DataTable code.
And then make a jQuery drop down within the datatable.
ToReceiveTable = $("#MerchantCatalogs").dataTable({
"processing": true,
"serverSide": true,
"order": [[ 6, "asc" ]],
"pageLength": 50,
"dom": '<"ProductFilterCatalog">frtip',
"ajax": "ajax?MerchantCatalogs=yes"
});
$("div.ProductFilterCatalog").html('');
And then write the jQuery DataTable Refresh when member selects a filter option from the drop down which we Data added.
$("#ProductFilterCatalog").on("change", function(){
var FilterVal = $(this).val();
var new_getURL = "ajax?MerchantCatalogs=yes&FilterStatus="+FilterVal;
ToReceiveTable.api().ajax.url(new_getURL).load();
});
Now, we have to create a jQuery Ajax file to handle the request to server Side process.
if(isset($_GET['MerchantCatalogs']) && $_GET['MerchantCatalogs'] == 'yes'){
$sql_details = array(
'member' => 'kvcodes',
'pass' => 'Demo@123',
'db' => 'demo_db',
'host' => 'localhost'
);
$table = 'customer_trans';
$primaryKey = 'id';
$columns = array(
array( 'db' => '`so`.`friends_ref`', 'dt' => 0, 'field' => 'friends_ref' ),
array( 'db' => '`debtor`.`name`', 'dt' => 1, 'field' => 'name'),
array( 'db' => '`so`.`display_dt`', 'dt' => 2, 'field' => 'display_dt','formatter' => function( $d, $row ) { return date( 'jS M y', strtotime($d)); } ),
array( 'db' => '`so`.`notify_dt`', 'dt' => 3, 'field' => 'notify_dt', 'formatter' => function( $d, $row ) { return date( 'jS M y', strtotime($d)); } ),
array( 'db' => '`so`.`product_amt`', 'dt' => 4, 'field' => 'product_amt'),
array( 'db' => '`so`.`alloc`', 'dt' => 5, 'field' => 'alloc'),
array( 'db' => '`so`.`status`', 'dt' => 6, 'field' => 'status')
);
$joinQuery = "FROM `{$table}` AS `so`";
$additionalWhere = '';
if(isset($_GET['FilterStatus'])){
if($_GET['FilterStatus'] == 'Received'){
$additionalWhere .= " AND status= 2 ";
}elseif($_GET['FilterStatus'] == 'Overdue'){
$additionalWhere .=" AND status = 1";
}elseif($_GET['FilterStatus'] == 'Yet To Receive' ){
$additionalWhere .=" AND status=3";
}
}
$wigepa_sources = Master_Table::simple( $_GET, $sql_details, $table, $primaryKey, $columns, $joinQuery , $additionalWhere, '', 'yes' );
echo json_encode($wigepa_sources);
}
CSS Part
.ProductFilterCatalog { float: left; text-align: left; }
.ProductFilterCatalog select { padding: 7px; border-color: #3d3d3d; }
Angular 6 CRUD Operations Application Tutorials
Read :
Summary
You can also read about AngularJS, ASP.NET, VueJs, PHP.
I hope you get an idea about DataTable Custom Filter Server Side.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.