DataTable Custom Filter Server Side Examples – Technology

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  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 :

• Technology
• Google Adsense
• Programming

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 onlinecode 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.