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
<table class="list bordered highlight" id="MerchantCatalogs"> <thead><tr> <th> <?php echo _("Reference"); ?> </th> <th> <?php echo _("Customer Name"); ?> </th> <th> <?php echo _("Invoice Date"); ?></th> <th> <?php echo _("Due Date"); ?></th> <th> <?php echo _("Amount"); ?> </th> <th> <?php echo _("Yet To Receive"); ?></th><th> <?php echo _("Status"); ?></th> </tr></thead> </table>
JS Source Code
ToReceiveTable = $("#MerchantCatalogs").dataTable({ "processing": true, "serverSide": true, "order": [[ 6, "asc" ]], "pageLength": 50, "ajax": "<?php echo get_url(); ?>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": "<?php echo get_url(); ?>ajax?MerchantCatalogs=yes" }); $("div.ProductFilterCatalog").html('<label> Filter Status : <select name="ProductFilterCatalog" id="ProductFilterCatalog"> <option value="-1" > All </label>');
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 = "<?php echo get_url(); ?>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' => '[email protected]', '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.
I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I’m a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.