How to use jQuery Datatables with Qcubed/Qcodo using Ajax Actions

In this tutorial we are going to look in to a quick way to use jQuery data tables with Ajax Actions. This can save you a lot of time if you are wanting to display custom reports or data in a tabular form that can be easily sorted, searched and paginated as well.

We will not use Qcubed/Qcodo datagrids for this example, Below are the sample php form and template file you will require. The code is pretty simple and self explanatory.

Below is the demo.php file

<?php
require ("framework/qcubed.inc.php"); 

	class DemoForm extends QForm {
		  
		protected $lstProduct;
		protected $calStartDate;
		protected $calEndDate;
		protected $btnSearch;
		protected $lblReport;
 
	    protected function Form_Run() { 
	    }
	    
	    protected function Form_Create() {
	        parent::Form_Create();
	         
			$this->lstProduct = new QListBox($this);
			$this->lstProduct->Name = "Product";
			$this->lstProduct->AddItem('-All Products-', null);
 			$arrAndCon = array();
 			$arrAndCon[] = QQ::Equal(QQN::Product()->Enabled, 1);
			$arrProduct = Product::QueryArray(QQ::AndCondition($arrAndCon), QQ::Clause(QQ::OrderBy(QQN::Product()->Name, true)));
			foreach($arrProduct as $objProduct){
				$this->lstProduct->AddItem($objProduct->Name, $objProduct->Id); 
			} 
			
			$this->calStartDate = new QCalendar($this);
 			$this->calStartDate->ShowButtonPanel = true;
			$this->calStartDate->Name = "Start Date"; 
 
			$this->calEndDate = new QCalendar($this);
 			$this->calEndDate->ShowButtonPanel = true;
			$this->calEndDate->Name = "End Date";
    
			$this->btnSearch = new QButton ( $this );
			$this->btnSearch->Text = QApplication::Translate ( 'Search' );
			$this->btnSearch->AddAction ( new QClickEvent (), new QAjaxAction ( 'btnSearch_Click' ) );
 			
			$this->lblReport = new QLabel($this);   
			$this->lblReport->HtmlEntities = false;
  	    } 

 

		protected function btnSearch_Click(){
		 
			if(!$this->calStartDate->DateTime) { $this->calStartDate->Warning = ("Start Date is required."); return false; }
			if(!$this->calEndDate->DateTime) { $this->calEndDate->Warning =  ("End Date is required."); return false; }
		

			$strHtml = <<<TTT
<table id="tblProduct" class="display" style="width:100%">
<thead>
<tr>
<th>Product</th> 
<th>Amount</th> 
</tr>
</thead>
<tbody>
TTT;
 

$arrProduct = array('TEST Product 1' => 12, "TEST Product 2" => 3);
foreach($arrProduct as $strName => $fltValue){  
 
$strHtml .=  "<tr>
<td>$strName</td> 
<td>".$fltValue."</td> 
</tr>";

}

$strHtml .= <<<TTT
</tbody>
<tfoot>
	<tr>
	<th>Product</th> 
	<th>Amount</th> 
	</tr>
</tfoot>
</table>
TTT;
 

$this->lblReport->Text = $strHtml;  

$strJS = "jQuery('#tblProduct').DataTable({'order': [[1, 'desc']]});";
QApplication::ExecuteJavascript($strJS);

		  
		}

    }
		     
	DemoForm::Run('DemoForm');
?>

and the demo.tpl.php

<?php $this->RenderBegin(); ?>


<section class="content">
    <div class="row">
        <div class="col-xs-12"><strong>Product:</strong><?php $this->lstProduct->RenderWithError(); ?></div>
    </div>

    <div class="row">
        <div class="col-xs-6"><strong>From Date:</strong><?php $this->calStartDate->RenderWithError(); ?></div>
        <div class="col-xs-6"><strong>To Date:</strong><?php $this->calEndDate->RenderWithError(); ?></div>
    </div>

    <div class="row">
        <div class="col-xs-12"> <?php $this->btnSearch->Render('CssClass=btn btn-primary'); ?></div>
    </div>
 
    <?php
    $this->lblReport->Render();
    ?>  
</section>
<?php $this->RenderEnd(); ?>
 

Please note in the tpl.php, in addition to the above code, the following Javascript library files and css files are required:

• https://code.jquery.com/jquery-3.5.1.js
• https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js
• https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css