DataTable Custom Filter Server Side Examples

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.