README

重要：此插件目前正在积极开发中，请自行承担使用风险。

安装

您可以使用composer将此插件安装到您的CakePHP应用程序中。

安装composer包的推荐方式是

composer require cakedc/cakephp-datatables

加载插件

生成表格索引页面。

bin/cake plugin load CakeDC/Datatables

生成表格索引页面。

bin/cake bake all Articles -t CakeDC/Datatables

设置表格字段

您可以设置一个简单的数组，其中包含要打印的列，或者一个更复杂的数组，其中包含渲染回调，或者它们的组合。

简单的实体可见字段

<?= $this->Datatable->setFields($article->getVisible()) ?>

手动配置简单列

<?= $this->Datatable->setFields(['id', 'title', 'user_id', 'user.name']); ?>

使用渲染回调设置复杂的列配置。

在这种情况下，打印一些随机数。

<?= $this->Datatable->setFields([
    [
        'name' => 'user_id',
        'render' => '
            function(data, type) {
                return Math.floor(Math.random() * 1000);
            }
        '
    ]
]); ?>

使用渲染回调设置复杂的列配置。

从记录中打印数据，硬编码的值。还可以向链接URL添加参数。

<?= $this->Datatable->setFields([
    [
        'name' => 'title',
        'links' => [
            // Will produce a dynamic link with object data, i.e.
            // <a href="/articles/view/' + obj.id + '">hard coded</a>
            ['url' => ['action' => 'view', 'extra' => ("/' + obj.id + '")], 'label' => 'hard coded'],

            // Will produce a fixed link with a hard coded label, i.e.
            // <a href="/articles/view/d">hard coded</a>
            ['url' => ['action' => 'view', 'd'], 'label' => 'hard coded'],

            // Will produce a fixed link with a dynamic label, i.e.
            // <a href="/articles/edit">' + obj.user_id + '</a>
            ['url' => ['action' => 'edit'], 'value' => 'obj.user_id'],

            // Will produce a fixed link without an external URL in the href attribute, i.e.
            // <a href="#">' + obj.user_id + '</a>
            ['url' => '#', 'value' => 'obj.user_id'],
        ]
    ],
]); ?>

添加条件以禁用链接

在链接中添加禁用选项，使用一个返回布尔值的javascript闭包，true表示显示没有链接的值，false表示返回带有链接的值，此函数接收当前列的值和行对象。

<?= $this->Datatable->setFields([
    [
        'name' => 'title',
        'links' => [
            [
                'url' => ['action' => 'view', 'extra' => ("/' + obj.id + '")],
                'label' => 'hard coded',
                'disable' => 'function (value) {
                    return value === "N/A"
                }',
            ],
            [
                'url' => ['action' => 'view', 'd'],
                'label' => 'hard coded'
                'disable' => 'function (value, obj) {
                    return obj.status === "inactive"
                }',
            ],
        ]
    ],
]); ?>

添加postLink和确认消息

将type => "POST"添加到链接，并在confirm选项中添加消息

<?= $this->Datatable->setFields([
    [
        'name' => 'action',
        'links' => [
            [
                'url' => ['action' => 'delete', 'extra' => ("/' + obj.id + '")],
                'label' => 'delete record',
                'type' => \CakeDC\Datatables\Datatables::LINK_TYPE_POST,
                'confirm' => __('Are you sure you want to delete this item?'),
            ],
        ]
    ],
]); ?>

注意：目前postLink不支持SecurityComponent，建议在控制器中禁用该方法

更改确认消息的方法

确认消息的条件是一个javascript闭包，它接收消息并返回一个布尔值。

<?= $this->Datatable->setFields([
    [
        'name' => 'action',
        'links' => [
            [
                'url' => ['action' => 'delete', 'extra' => ("/' + obj.id + '")],
                'label' => 'delete record',
                'type' => \CakeDC\Datatables\Datatables::LINK_TYPE_POST,
                'confirm' => __('Are you sure you want to delete this item?'),
                'confirmCondition' => 'function (message){ return window.confirm(message); }',
            ],
        ]
    ],
]); ?>

简单和复杂列条件的组合

$this->Datatable->setFields(
    [
        'id',
        [
            'name' => 'title',
            'links' => [
                ['url' => ['action' => 'view', 'extra' => ("/' + obj.id + '")], 'label' => 'hard coded'],
                ['url' => ['action' => 'view', 'd'], 'label' => 'hard coded'],
                ['url' => ['action' => 'edit'], 'value' => 'obj.user_id'],
                ['url' => '#', 'value' => 'obj.user_id'],
            ]
        ],
        [
            'name' => 'user_id',
            'render' => '
                function(data, type) {
                    return Math.floor(Math.random() * 1000);
                }
            '
        ],
        'user.name'
    ]
);

$this->Datatable->getDatatableScript("table-articles");

将生成以下脚本。

    // API callback
    let getData = async () => {
        let res = await fetch('/articles.json')
    }

    // Datatables configuration
    $(() => {
        $('#table-articles').DataTable({
            ajax: getData(),
            processing: true,
            serverSide: true,
            columns: [
                {data:'id'},
                {
                    data:'title',
                    render: function(data, type, obj) {
                        return '<a href="/articles/view/' + obj.id + '">hard coded</a>'
                            + '<a href="/articles/view/d">hard coded</a>'
                            + '<a href="/articles/edit">' + obj.user_id + '</a>'
                            + '<a href="#">' + obj.user_id + '</a>'
                    }
                },
                {
                    data:'user_id',
                    render: function(data, type) {
                        return Math.floor(Math.random() * 1000);
                    }
                },
                {data:'user.name'}
            ]
        });
    });

在列中搜索的输入类型

现在有4种输入类型：输入选择多选日期

在定义列时指定所需的搜索类型，具体指定此数组

'searchInput' => [
            'type' => '{{any-type}}',
            'options' => [
                    ['id' => 1, 'name' => 'one'],
            ],
        ],

对于输入类型文本

默认情况下不需要做任何操作

对于选择类型

'searchInput' => [
    type => 'select',
    'options' => [
        ['id' => 1, 'name' => 'one'],
        ['id' => 2, 'name' => 'two'],
        ....
    ]
],

对于多选类型

'searchInput' => [
    type => 'multiple',
    'options' => [
        ['id' => 1, 'name' => 'one'],
        ['id' => 2, 'name' => 'two'],
        ....
    ]
],

对于日期类型

需要jquery-ui或jquery-datepicker

'searchInput' => [
    type => 'date',
    'options' => [],
]

这是为了在列定义中集成

示例

<?= $this->Datatable->setFields([
    [
        'name' => 'user_id',
        'searchInput' => [
            'type' => 'select',
            'options' => [
                ['id' => 1, 'name' => 'one'],
                ['id' => 2, 'name' => 'two'],
                ....
            ]
        ],
        'render' => '
            function(data, type) {
                return Math.floor(Math.random() * 1000);
            }
        '
    ]
]); ?>

在选项中，可以使用find('list')并放入名称、id和name。如果不希望搜索列，则需要指定此参数

php 'searchable' => false,

获取表格输入延迟2秒

<?php $this->Datatable->setConfigKey('delay', 2000, true); ?>

获取表格脚本。

您只需要告诉帮助人员为您创建脚本，并传递用于表格的标签id。

<?= $this->Datatable->getDatatableScript("table-articles") ?>

设置表头。

可选地，您可以按照以下方式格式化和翻译表头

<?= $this->Datatable->getTableHeaders($article->getVisible(), true) ?>

在同一个模板中创建多个表格

重置表格实例，然后您可以设置一个新的表格

<?= $this->Datatable->reset() ?>

指定获取数据的具体URL

例如，如果您在/pages/index，但是从/pages/list获取日期，那么在同一个页面上有多个表格时，这是有用的

<?= $this->Datatable->getInstance()->setConfig('ajaxUrl', ['controller' => 'Pages', 'action' => 'list']); ?>

指定特定的ajax调用类型

您可以在配置中指定"ajaxType"，以确定ajax调用是GET还是POST，例如

<?php
$this->Datatable->getInstance()->setConfig('ajaxType', 'POST');
$this->Datatable->getInstance()->setConfig('csrfToken', $this->getRequest()->getAttribute("csrfToken"));
?>

重要：如果您设置POST，则必须在Security Component中设置"unlockedActions"，在控制器中的initialize函数中指定目标操作

public function initialize(): void
{
    parent::initialize();

    ...

    if ($this->components()->has('Security')) {
        $this->Security->setConfig('unlockedActions', ['list']);
    }

    ...

}

在行创建时添加回调

例如，如果您需要根据数据中的特定值，为每个 tr 元素添加一个 css 类（用于更改行颜色）

$this->Datatable->setCallbackCreatedRow(
    'function( row, data, dataIndex ) {
        if (!data.viewed) {
            $(row).addClass("rowhighlight");
        }
    }'
);
``