Yii2 DataTables
Yii2 Widget for DataTables plug-in for jQuery
Work in Progress. Not ready for production
Installation
The preferred way to install this extension is through composer.
Either run
composer require "nullref/yii2-datatables" "*"
or add
"nullref/yii2-datatables": "*"
to the require section of your composer.json file.
Basic Usage
<?= \nullref\datatable\DataTable::widget([
'data' => $dataProvider->getModels(),
'columns' => [
'id',
'name',
'email'
],
]) ?>Add Links to row
<?= \nullref\datatable\DataTable::widget([
'columns' => [
//other columns
[
'class' => 'nullref\datatable\LinkColumn',
'url' => ['/model/delete'],
'options' => ['data-confirm' => 'Are you sure you want to delete this item?', 'data-method' => 'post'],
'queryParams' => ['id'],
'label' => 'Delete',
],
],
]) ?>Properties of LinkColumn:
-
label- text placed inatag; -
url- will be passed toUrl::to(); -
options- HTML options of theatag; -
queryParams- array of params added tourl
Styling
DataTables supports several styling solutions, including Bootstrap, jQuery UI, Foundation.
'assetManager' => [
'bundles' => [
'nullref\datatable\DataTableAsset' => [
'styling' => \nullref\datatable\DataTableAsset::STYLING_BOOTSTRAP,
]
],
],Custom assets
It's posible to use custom styles and scripts:
'nullref\datatable\DataTableAsset' => [
'sourcePath' => '@webroot/js/plugin/datatables/',
'js' => [
'jquery.dataTables-1.10-cust.js',
'DT_bootstrap.js',
],
'css' => [
'data-table.css',
],
'styling' => false,
]Server-side processing
To enable server-side processing add DataTableAction to controller like this:
class SomeController extends Controller
{
public function actions()
{
return [
'datatables' => [
'class' => 'nullref\datatable\DataTableAction',
'query' => Model::find(),
],
];
}
}Searching and ordering can be customized using closures
public function actions()
{
return [
'datatables' => [
'class' => 'nullref\datatable\DataTableAction',
'query' => Model::find(),
'applyOrder' => function($query, $columns, $order) {
//custom ordering logic
return $query;
},
'applyFilter' => function($query, $columns, $search) {
//custom search logic
return $query;
},
],
];
}
In DataTable options specify:
{
"serverSide": true,
"ajax": "/datatables"
}