Grid widget for the Yii Framework, wrapper for the DataTables jQuery plugin
JavaScript PHP CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
assets
messages
EButtonColumn.php
ECheckBoxColumn.php
EDTPagination.php
EDTSort.php
EDataColumn.php
EDataTables.php
EEditableColumn.php
EGridColumn.php
ELinkColumn.php
LICENSE
README.md
composer.json

README.md

Goal of this widget/wrapper is to provide a drop in replacement for base CGridView widget from the Yii framework, using DataTables plugin.

It's usable, but feedback is needed. Please post issues on project's page.

##Features

  • Redrawing of table contents (after paging/sorting/searching) using AJAX calls;
  • Using CGridView columns definition format, supports all basic special columns like Buttons, Checkbox, etc;
  • Custom buttons in table header;
  • Smoothness theme from JUI by default;
  • Twitter Bootstrap support through the bootstrap extension;
  • Partial editable cells support.

##Requirements

##Usage

It's not 100% compatible with CGridView. I've decided not to alter the GET parameter names used by DataTables, so you have to use the provided EDTSort and EDTPagination classes as well as alter filter processing. See below.

###Installation

Extract into extensions dir, or use composer: $ composer require nineinchnick/edatatables:dev-master

Import in config/main.php

'import' => array(
        ...
        'ext.edatatables.*', //if it's in your extensions folder
        'vendor.nineinchnick.edatatables.*', //if you're using composer (and have a 'vendor' alias!)
        ...
)

###Using

Use similar to CGridView. If displayed in a normal call just run the widget. To fetch AJAX response send json encoded result of $widget->getFormattedData().

The action in a controller:

$widget = $this->createWidget('ext.edatatables.EDataTables', array(
 'id'            => 'products',
 'dataProvider'  => $dataProvider,
 'ajaxUrl'       => $this->createUrl('/products/index'),
 'columns'       => $columns,
));
if (!Yii::app()->getRequest()->getIsAjaxRequest()) {
  $this->render('index', array('widget' => $widget,));
  return;
} else {
  echo json_encode($widget->getFormattedData(intval($_REQUEST['sEcho'])));
  Yii::app()->end();
}

The index view (for non-ajax requests):

<?php $widget->run(); ?>

###Preparing the dataprovider

To use features like sorting, pagination and filtering (by quick search field in the toolbar or a custom advanced search filter form) the dataprovider object passed to the widget must be prepared using provided EDTSort and EDTPagination class and CDbCriteria filled after parsing sent forms.

The simplest example:

$criteria = new CDbCriteria;
// bro-tip: $_REQUEST is like $_GET and $_POST combined
if (isset($_REQUEST['sSearch']) && isset($_REQUEST['sSearch']{0})) {
    // use operator ILIKE if using PostgreSQL to get case insensitive search
    $criteria->addSearchCondition('textColumn', $_REQUEST['sSearch'], true, 'AND', 'ILIKE');
}

$sort = new EDTSort('ModelClass', $sortableColumnNamesArray);
$sort->defaultOrder = 'id';
$pagination = new EDTPagination();

$dataProvider = new CActiveDataProvider('ModelClass', array(
    'criteria'      => $criteria,
    'pagination'    => $pagination,
    'sort'          => $sort,
))

An advanced example would be based on a search form defined with a model and a view. Its attributes would be then put into a critieria and passed to a dataProvider.

###Other options

Check out the DataTables web page for docs regarding:

  • Table layout
  • Styling
  • Multi-column sorting etc.
  • Some examples and funky plugins

###Using with Twitter Bootstrap

Since the bootstrap attribute has been removed, please use the following configuration in the widget factory or as a default skin for your bootstrap theme:

'EDataTables' => array(
    'htmlOptions' => array('class' => ''),
    'itemsCssClass' => 'table table-striped table-bordered table-condensed items',
    'pagerCssClass' => 'paging_bootstrap pagination',
    'buttons' => array(
        'refresh' => array(
            'tagName' => 'a',
            'label' => '<i class="icon-refresh"></i>',
            'htmlClass' => 'btn',
            'htmlOptions' => array('rel' => 'tooltip', 'title' => Yii::t('EDataTables.edt',"Refresh")),
            'init' => 'js:function(){}',
            'callback' => 'js:function(e){e.data.that.eDataTables("refresh"); return false;}',
        ),
    ),
    'datatableTemplate' => "<><'row'<'span3'l><'dataTables_toolbar'><'pull-right'f>r>t<'row'<'span3'i><'pull-right'p>>",
    'registerJUI' => false,
    'options' => array(
        'bJQueryUI' => false,
        'sPaginationType' => 'bootstrap',
        //'fnDrawCallbackCustom' => "js:function(){\$('a[rel=tooltip]').tooltip(); \$('a[rel=popover]').popover();}",
    ),
    'cssFiles' => array('bootstrap.dataTables.css'),
    'jsFiles' => array(
        'bootstrap.dataTables.js',
        'jdatatable.js' => CClientScript::POS_END,
    ),
),

##Resources