README

此插件实现了jQuery dataTables插件（www.datatables.net）在您的CakePHP 3应用程序中。另外，还添加了具有请求延迟的多列搜索，以最小化Ajax请求。

要求

CakePHP 3 (http://www.cakephp.org)
jQuery (http://www.jquery.com)
jQuery DataTables (http://www.datatables.net)
Composer (https://getcomposer.org.cn)

可选

Twitter Bootstrap 3 (https://bootstrap.ac.cn)
FontAwesome 4 (http://fortawesome.github.io/Font-Awesome)

核心模板使用Twitter Bootstrap语法编写，并包含FontAwesome图标，但可以轻松更改。

使用方法

步骤 1：安装

使用composer安装此插件。将以下存储库和要求添加到您的composer.json中

"require": {
    "fheider/cakephp-datatables": "dev-master"
}

步骤 2：包含CakePHP插件和加载组件和辅助函数

在app/bootstrap.php中加载插件

Plugin::load('DataTables', ['bootstrap' => false, 'routes' => false]);

包含组件和辅助函数

class AppController extends Controller
{
    
    public $helpers = [
        'DataTables' => [
            'className' => 'DataTables.DataTables'
        ]
    ];
    
    public function initialize()
    {
        $this->loadComponent('DataTables.DataTables');
    }
    
}

步骤 3：包含资产

首先包含jQuery和jQuery DataTables脚本，然后是dataTables逻辑

echo $this->Html->script('*PATH*/jquery.min.js');
echo $this->Html->script('*PATH*/jquery.dataTables.min.js');
echo $this->Html->script('*PATH*/dataTables.bootstrap.min.js'); (Optional)
echo $this->Html->script('DataTables.cakephp.dataTables.js');

包含dataTables CSS

echo $this->Html->css('PATH/dataTables.bootstrap.css');

步骤 4：在您的控制器中添加业务逻辑

像find一样简单使用它

$data = $this->DataTables->find('*TABLE*', [
    'contain' => []
]);

$this->set([
    'data' => $data,
    '_serialize' => array_merge($this->viewVars['_serialize'], ['data'])
]);

需要array_merge是因为组件将多个变量添加到视图中，如recordsTotal、recordsFiltered等。因此，您的序列化数据被添加到这些变量中。

步骤 5：模板/视图

首先以正常方式显示您的表格，这样dataTables不会发送额外的请求。表格底部用于多个搜索字段。这可以是输入或选择元素。

<table class="table table-striped table-bordered table-hover dataTable">
    <thead>
        <tr>
            ...
        </tr>
    </thead>
    <tfoot>
    <tr class="table-search info">
        <td><input type="text" placeholder="Search ..." class="form-control input-sm input-block-level" /></td>
        <td><select><option value="">---</option>...</select></td>
        ...
    </tr>
    </tfoot>
    <tbody>
    <?php foreach($data as $item): ?>
    <tr>
        <td><?= $item->id ?></td>
        <td><?= $item->name ?></td>
        ...
    </tr>
    <?php endforeach; ?>
    </tbody>
</table>

然后添加dataTables逻辑。选项与dataTables参考中的选项完全相同（https://datatables.net.cn/reference/option/）。

$this->DataTables->init([
    'ajax' => [
        'url' => Router::url(['action' => 'index']),
    ],
    'deferLoading' => $recordsTotal,
    'delay' => 600,
    'columns' => [
        [
            'name' => '*MODEL*.id',
            'data' => 'id'
            'orderable' => false
        ],
        [
            'name' => '*MODEL*.name',
            'data' => 'name'
        ],
        ...
    ]
])->draw('.dataTable');

在draw方法中设置您的表格选择器。延迟是设置处理搜索输入延迟的额外选项。如果延迟为0，则在每次按键时都会发送请求。

列设置注意事项

每个列包含2个重要信息

name = name of your table and field like 'Customers.id'
data = name of the field in json response

选项名称是排序和筛选所需的。选项数据是处理 JSON 响应所需的。
您还可以轻松添加相关数据（例如，客户属于客户组）

name = Group.name
data = group.name

请注意！
确保您的列数组中的列数与您的 HTML 表格中的列数相同非常重要！

fheider / cakephp-datatables

维护者

详细信息