README

安装

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

安装composer包的推荐方法是

composer require doshu/datatable

此插件旨在用于标准的cakephp 4.x应用程序。表格使用vue js 2渲染，并通过基于类的配置生成。

加载Datatable助手

$this->loadHelper('Datatable.Datatable')

在布局中插入静态文件

使用Datatable助手在布局文件中加载静态资源，创建一个名为BASE_UR的全局js变量，其中包含应用程序的基础URL，以及一个名为_CSF_TOKEN的变量，其中包含CSRF令牌。

<head>
  <?= $this->Datatable->loadAssets(); ?>
  <script type="text/javascript">
    var BASE_URL = "<?= \Cake\Routing\Router::fullBaseUrl().$this->request->getUri()->base; ?>";
    var _CSRF_TOKEN = "<?= $this->request->getAttribute('csrfToken') ?>";
  </script>
</head>

定义一个datatables后端

在APP/src/Model/Datatable（位置可以更改）中创建一个类（在这个例子中，我们将创建一个用于显示所有客户的datatables）

<?php

    namespace App\Model\Datatable;

    class ClientsDatatable extends \Datatable\Model\TableSchema
    {
        /*
         * _default order set the default used in the datatable
         */
        protected $_defaultOrder = ['column' => 'name', 'direction' => 'asc'];
        
        /*
         * the _prepareColumns function is called initially for defining
         * columns type, label, options, ecc..
         */
        protected function  _prepareColumns() {
        
            $this->_addColumn('name', [
                'header'=> 'Nome',
            ]);
            
            $this->_addColumn('phone', [
                'header'=> 'Telefono',
            ]);
            
            $this->_addColumn('email', [
                'header'=> 'Email',
            ]);
        }
        
        /*
         * this function is called for every row, 
         * and is used to define the available row actions
         */
        protected function _prepareRowsAction($row) 
        {
            return [
                'edit' => [
                    'title' => 'Modifica',
                    'type' => 'get',
                    'url' => ['controller' => 'clients', 'action' => 'edit', $row->id],
                ],
                'delete' => [
                    'title' => 'Elimina',
                    'type' => 'post',
                    'url' => ['controller' => 'clients', 'action' => 'delete', $row->id],
                    'confirm' => 'Sei sicuro di voler eliminare il cliente?'
                ],
            ];
        }

    }


?>

查看示例文件夹以了解所有可用选项

创建控制器操作

在定义datatables模型类之后，您可以创建将渲染datatables并将数据发送到前端的控制器操作

public function index()
{
    $datatable = new \App\Model\Datatable\ClientsDatatable(
        ['controller' => 'Clients', 'action' => 'datatable', '_ext' => 'json'], //set the action that the datatable will send requests to
        $this //controller instance
    );

    $this->set(compact('datatable'));
}

public function datatable() {
    //create the datatable instance in the same way as in the index action
    $datatable = new \App\Model\Datatable\ClientsDatatable(
        ['controller' => 'Clients', 'action' => 'datatable', '_ext' => 'json'],
        $this
    );
    //create the initial query and pass to the prepareCollection datatable method
    $clients = $this->Clients->find();
    //prepareCollection will apply all the filter and sorting to the collection and will set the result body to the response
    $datatable->prepareCollection($clients);
}

渲染datatables

使用datatables助手在视图文件中的任何位置渲染datatables

<div class="content">
  <?= $this->Datatable->display($datatable); ?>
</div>

doshu/

维护者

详细信息