README

本扩展为Yii2框架提供了DataTables的集成。

安装

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

可以运行

composer require --prefer-dist reine/yii2-widget-datatables "^0.1.1"

或者将以下内容添加到你的composer.json文件的require部分。

"reine/yii2-widget-datatables": "^0.1.1"

使用方法

像使用其他Yii2小部件一样使用DataTables。

# In controller, prepare data that will be passed to the view:

    public function actionIndex()
    {
        $searchModel = new ModelSearch();
        $dataProvider = $searchModel->search(Yii::$app->request->queryParams, $this->_pageSize);

        return $this->render('index', [
            'searchModel' => $searchModel,
            'dataProvider' => $dataProvider,
        ]);
    }

# In view:

<?php
use reine\datatables\DataTables;
?>
    <div class="row">
        <div class="col-12">

        <?= DataTables::widget([
            'dataProvider' => $dataProvider,
            'filterModel' => $searchModel,
            // Optional (only if you want to override the defaults)
            'tableOptions' => [
                'class' => 'table card-table table-vcenter text-nowrap datatable',
            ],
            // Optional (only if you want to override the defaults)
            'clientOptions' => [
                "lengthMenu" => [[10,20,50,-1], [10,20,50,Yii::t('app',"All")]],
                "info" => true,
                "responsive" => true, 
                "dom" => 'lBfTrtip',
                "tableTools" => [],
                'buttons' => [
                    [
                        'extend' => 'copy',
                        'text'   => 'Copy to Clipboard'
                    ],
                    'excel',
                    'pdf'
                ],
            ],
            'columns' => [
                ['class' => 'yii\grid\SerialColumn'],

                //columns

                ['class' => 'yii\grid\ActionColumn'],
            ],
        ]);?>

        </div>
    </div>

本扩展使用Bootstrap 4集成插件，默认提供Yii2风格的样式。

TableTools插件也可用。在clientOptions数组中指定DOM和tableTools设置，如下例所示。

...
'clientOptions' => [
    "lengthMenu"=> [[20,-1], [20,Yii::t('app',"All")]],
    "info"=>false,
    "responsive"=>true, 
    "dom"=> 'lfTrtip',
    "tableTools"=>[
        //empty for load button assets
    ],
    'buttons'   => ['copy', 'excel', 'pdf'],
],
...

您还可以在应用程序的JavaScript层中使用DataTables。为了实现这一点，您需要将DataTables作为您的Asset文件的依赖项。在这种情况下，您可以使用yii\grid\GridView或者使用datatables选项retrieve => true以避免错误。在这两种情况下，所有选项都必须在JavaScript对象中。

public $depends = [
...
'reine\datatables\DataTablesAsset',
...
];