Skip to content
This repository

JQuery DataTable plugin server-side processing component for CakePHP

branch: master

CakePHP DataTable Plugin

DataTable is a cakephp plugin for JQuery DataTables.


  • CakePHP 2.2 or higher



  1. Download this:
  2. Unzip
  3. Copy the resulting folder to app/Plugin
  4. Rename the folder to DataTable

[GIT Submodule]

In your app directory run:

git submodule add Plugin/DataTable
git submodule init
git submodule update

[GIT Clone]

In your plugin directory run:

git clone DataTable

Enable Plugin

In your app/Config/bootstrap.php:

// OR


Example controller:

class UsersController extends AppController {

 * Components
 * @var array
    public $components = array(
        'DataTable.DataTable' => array(
            'columns' => array(
                'id' => false,                      // bSearchable and bSortable will be false
                'username' => 'Name',               // bSearchable and bSortable will be true, with a custom label `Name`
                                                    // by default, the label with be a Inflector::humanize() version of the key
                'email' => array(
                    'bSearchable' => 'customSearch',// will use model callback to add search conditions
                'Actions' => null,                  // tells DataTable that this column is not tied to a field

 * Helpers
 * @var array
    public $helpers = array(

You may now paginate more than one model in a view. This becomes useful when displaying two or more hasMany associated models for a view page. List all models to paginate in $this->DataTable->paginate property:

public function view() {
    $this->DataTable->paginate = array('User', 'Article');

Note: These models must be directly related.

See docblock for complete list of component settings.

Once you have your component setup, you will need to add your view.

  • First create a View/[ModelName]/datatable folder
  • Create action_name.ctp view inside the folder

The DataTableResponseView (automatically set by the component) class has a member called dtResponse which holds the return data for jquery datatables, including aaData.

By default, the view var $dtResults will hold resultant model data after searching and paginating. It can be customized with the viewVar setting.

Example view file:

foreach($dtResults as $result) {
    $this->dtResponse['aaData'][] = array(

Example bSearchable callback:

class Users extends AppModel {
    public function customSearch($field, $searchTerm, $columnSearchTerm, $conditions) {
        if ($searchTerm) {
            $conditions[] = array("$field LIKE" => '%' . $searchTerm);  // only do left search
        if ($columnSearchTerm) {
            $conditions[] = array($field => $columnSearchTerm);         // only do exact match
        return $conditions;

Helper Usage

$this->DataTable->render(); // renders default model for this view
$this->DataTable->render('AssociatedModel'); // renders 'AssociatedModel' table

If you create the <table> yourself, be sure to add a data-model="Model" attribute to the table tag. The helper is still required to parse the column settings and outputs a global javascript dataTableSettings available for you to use. The helper by default uses the following init script:

$('.dataTable').each(function() {
    var table = $(this);
    var model = table.attr('data-model');
    var settings = dataTableSettings[model];

The helper relies on a js var that is set inside the dataTableSettings block. Add <?php echo $this->fetch('dataTableSettings'); ?> before your scripts block.

Something went wrong with that request. Please try again.