README

Yii2 Widget for DataTables plug-in for jQuery

安装

通过 composer 安装此扩展是首选方式。

运行

composer require dantart/yii2-datatables

或添加

"dantart/yii2-datatables": "~1.0"

到您的 composer.json 文件的 require 部分中。

基本用法

<?= \dantart\datatable\DataTable::widget([
    'data' => $dataProvider->getModels(),
    'columns' => [
        'id',
        'name',
        'email'
    ],
]) ?>

DataTable 选项

您还可以使用所有 Datatables 选项

作为小部件选项传递

<?= \dantart\datatable\DataTable::widget([
    'data' => $dataProvider->getModels(),
    'scrollY' => '200px',
    'scrollCollapse' => true,
    'paging' => false,
    'columns' => [
        'name',
        'email'
    ],
    'withColumnFilter' => true,
]) ?>

指定单元格的标签和 CSS 类

    <?= \dantart\datatable\DataTable::widget([
        'columns' => [
            //other columns
            [
                'data' => 'active',
                'title' => 'Is active',
                'sClass' => 'active-cell-css-class',
            ],
        ],
    ]) ?>

添加行链接

    <?= \dantart\datatable\DataTable::widget([
        'columns' => [
            //other columns
            [
                'class' => 'dantart\datatable\LinkColumn',
                'url' => ['/model/delete'],
                'linkOptions' => ['data-confirm' => 'Are you sure you want to delete this item?', 'data-method' => 'post'],
                'label' => 'Delete',
            ],
        ],
    ]) ?>

LinkColumn 的属性

label - 放置在 a 标签中的文本；
title - 列的标题；
url - 将传递给 Url::to()；
linkOptions - a 标签的 HTML 选项；
queryParams - 添加到 url 的参数数组，默认为 ['id']；
render - 自定义渲染 js 函数。例如

//config ...
    'columns' => [
        //...
        [
            'class' => 'dantart\datatable\LinkColumn',
            'queryParams' => ['some_id'],
            'render' => new JsExpression('function render(data, type, row, meta ){
                return "<a href=\"/custom/url/"+row["some_id"]+"\">View</a>"
            }'),
        ],
    ],
//...

您应该在渲染函数中传递到 queryParams 属性的字段

列过滤

您可以通过设置选项 withColumnFilter 为 true 来添加列过滤功能

默认情况下，它生成一个文本字段作为过滤输入。
当定义列时，可以使用 filter 参数将其替换为组合框。它应该是一个关联数组，其中键用作过滤（发送到服务器的值），而值用于单元格渲染
可以通过将 filter 设置为 false 来避免

    <?= \dantart\datatable\DataTable::widget([
        'columns' => [
            'id',
            //...
            [
                'data' => 'active',
                'title' => \Yii::t('app', 'Is active'),
                'filter' => ['true' => 'Yes', 'false' => 'No'],
            ],
            [
                'data' => 'last_connection',
                'filter' => false,
            ],
        ],
    ]) ?>
//...

在上面的示例中，发送到服务器的 active 字段的过滤将包含 'true' 或 'false'，但单元格内容将是 '是' 或 '否'，并且过滤将作为组合框呈现。

将不会为 last_connection 属性生成过滤。

高级列定义

可以使用 \dantart\datatable\DataTableColumn 类自定义单元格渲染或过滤。

    <?= \dantart\datatable\DataTable::widget([
        'columns' => [
            //other columns
            [
                'class' => 'dantart\datatable\DataTableColumn', // can be omitted
                'data' => 'active',
                'renderFiler' => new \yii\web\JsExpression('function() { ' .
                    'return jQuery(\'<input type="checkbox" value="true"/> Active only\'); ' .
                '}'),
                'render' => new \yii\web\JsExpression('function(data, type, row, meta) { ' .
                    'return jQuery(\'<input type="checkbox" value="true" disabled/>\')' .
                    '    .prop(\'checked\', data == \'true\'); ' .
                    '}'),
            ],
        ],
    ]) ?>

样式

DataTables 支持多种样式解决方案，包括 Bootstrap、jQuery UI、Foundation。

'assetManager' => [
    'bundles' => [
        'dantart\datatable\assets\DataTableAsset' => [
            'styling' => \dantart\datatable\assets\DataTableAsset::STYLING_BOOTSTRAP,
        ]
    ],
],

Bootstrap

Bootstrap 表格需要类 'table'，因此您需要通过小部件配置使用 tableOptions 添加 'table' 类。

<?= \dantart\datatable\DataTable::widget([
    'data' => $dataProvider->getModels(),
    'tableOptions' => [
        'class' => 'table',
    ],
    'columns' => [
        'id',
        'name',
        'email',
    ],
]) ?>

自定义资源

可以使用自定义样式和脚本。

'dantart\datatable\assets\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' => 'dantart\datatable\DataTableAction',
                 'query' => Model::find(),
             ],
         ];
     }
     
}

可以使用闭包自定义搜索和排序

public function actions()
{
    return [
         'datatables' => [
             'class' => 'dantart\datatable\DataTableAction',
             'query' => Model::find(),
             'applyOrder' => function($query, $columns, $order) {
                //custom ordering logic
                $orderBy = [];
                foreach ($order as $orderItem) {
                    $orderBy[$columns[$orderItem['column']]['data']] = $orderItem['dir'] == 'asc' ? SORT_ASC : SORT_DESC;
                }
                return $query->orderBy($orderBy);
             },
             'applyFilter' => function($query, $columns, $search) {
                //custom search logic
                $modelClass = $query->modelClass;
                $schema = $modelClass::getTableSchema()->columns;
                foreach ($columns as $column) {
                    if ($column['searchable'] == 'true' && array_key_exists($column['data'], $schema) !== false) {
                        $value = empty($search['value']) ? $column['search']['value'] : $search['value'];
                        $query->orFilterWhere(['like', $column['data'], $value]);
                    }
                }
                return $query;
             },
         ],
    ];
}

如果您需要获取一些相关数据，您可以在 applyFilter 闭包中调用 $query 中的 join 或类似方法。

并为小部件添加选项

    <?= \dantart\datatable\DataTable::widget([
        /** ... */
        'serverSide' => true,
        'ajax' => '/site/datatables',
    ]) ?>

dantart / yii2-datatables

维护者

详情