setitch/yii2-datatables

Yii2 扩展 DataTables jQuery 插件 - 稳定版

安装次数: 97

依赖者: 0

建议者: 0

安全性: 0

星标: 1

关注者: 1

分支: 46

类型:yii2-extension

1.1.3 2016-08-09 13:22 UTC

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 支持多种样式解决方案,包括 BootstrapjQuery UIFoundation

'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',
    ]) ?>