setitch / yii2-datatables
Yii2 扩展 DataTables jQuery 插件 - 稳定版
1.1.3
2016-08-09 13:22 UTC
Requires
- php: >=5.4.0
- bower-asset/datatables: ~1.10
- bower-asset/datatables-plugins: ~1.0
- yiisoft/yii2: ~2.0
This package is auto-updated.
Last update: 2024-09-06 09:48:08 UTC
README
由于源项目不稳定而进行分支。
Yii2 DataTables
Yii2 小部件,用于 DataTables jQuery 插件
安装
安装此扩展的首选方式是通过 composer。
运行以下命令之一:
composer require nullref/yii2-datatables
或
"nullref/yii2-datatables": "~1.0"
将以下内容添加到您的 composer.json
文件的 require 部分。
基本用法
<?= \nullref\datatable\DataTable::widget([ 'data' => $dataProvider->getModels(), 'columns' => [ 'id', 'name', 'email' ], ]) ?>
DataTable 选项
您还可以使用所有 Datatables 选项
作为小部件选项传递
<?= \nullref\datatable\DataTable::widget([ 'data' => $dataProvider->getModels(), 'scrollY' => '200px', 'scrollCollapse' => true, 'paging' => false, 'columns' => [ 'name', 'email' ], ]) ?>
添加行链接
<?= \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', ], ], ]) ?>
LinkColumn
的属性
label
- 放置于a
标签中的文本;url
- 将传递给Url::to()
;options
-a
标签的 HTML 选项;queryParams
- 添加到url
的参数数组
样式
DataTables
支持多种样式解决方案,包括 Bootstrap
、jQuery UI
、Foundation
。
'assetManager' => [ 'bundles' => [ 'nullref\datatable\DataTableAsset' => [ 'styling' => \nullref\datatable\DataTableAsset::STYLING_BOOTSTRAP, ] ], ],
自定义资源
可以使用自定义样式和脚本
'nullref\datatable\DataTableAsset' => [ 'sourcePath' => '@webroot/js/plugin/datatables/', 'js' => [ 'jquery.dataTables-1.10-cust.js', 'DT_bootstrap.js', ], 'css' => [ 'data-table.css', ], 'styling' => false, ]
服务器端处理
要启用服务器端处理,请将 DataTableAction
添加到控制器中,如下所示:
class SomeController extends Controller { public function actions() { return [ 'datatables' => [ 'class' => 'nullref\datatable\DataTableAction', 'query' => Model::find(), ], ]; } }
可以使用闭包自定义搜索和排序
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; }, ], ]; }
并添加小部件选项
<?= \nullref\datatable\DataTable::widget([ /** ... */ 'serverSide' => true, 'ajax' => '/site/datatables', ]) ?>