Filter and search request

[wash34000]

Hello, I followed the installation steps for cakePHP 4. The DataTables displays correctly, but I cannot sort or filter the data. My controller returns HTML content and no JSON response ...

Do you have an example controller action to help me?

[wash34000]

public function index()
{
    if ($this->request->is(['get', 'post'])) {
        debug($this->request->getQuery());
    }
    $columns = [
        [
            'field' => 'Products.id',
            'data' => 'id',
            'visible' => false,
            'searchable' => false,
        ],
        [
            'title' => __('Name'),
            'field' => 'Products.name',
            'data' => 'name',
            'visible' => true,
            'searchable' => true,
            'className' => 'text-primary',
        ],
    ];

    $data = $this->DataTables->find('Products', 'all', [
        'order' => ['id' => 'asc'],
    ], $columns);

    $this->set('columns', $columns);
    $this->set('data', $data);

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

[dividedbynothing]

Do you get any errors in when you try to filter? Or is there any info in your browser's Developer Tools -> Network panel? You should see json request-response errors there.

Your index controller seems OK. Maybe something in your index view template?

Also, maybe try it without this in your controller:

   if ($this->request->is(['get', 'post'])) {
        debug($this->request->getQuery());
    }

[wash34000]

I try this to debug. I have the same result without. if ($this->request->is(['get', 'post'])) { debug($this->request->getQuery()); }

[wash34000]

Here my index.php template :

<!-- Content Header (Page header) -->
<section class="content-header">
  <h1>
    <?= __('Products') ?>
    <small><?= __('Advanced product table') ?></small>
    <span><?php echo $this->Html->link(__('New product'), ['action' => 'add'], ['class'=>'btn btn-success btn-xs']) ?></span>
  </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li><a href="#">Products</a></li>
        <li class="active">List</li>
      </ol>
</section>
<?php
$options = [
    'ajax' => [
        'url' => $this->Url->build(), // current controller, action, params
    ],
    'data' => $data,
    'serverSide' => True,
    'deferLoading' => $data->count(),
    'columns' => $columns,
    'order' => [1, 'asc'], // order by name
];

?>
<section class="content">
  <div class="row">
    <div class="col-xs-12">
      <div class="box">
        <div class="box-header">
          <h3 class="box-title">Products DataTables</h3>
        </div>
        <!-- /.box-header -->
        <div class="box-body">
            <?= $this->DataTables->table('products-table', $options, ['class' => 'table table-bordered table-hover']); ?>
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->
    </div>
    <!-- /.col -->
  </div>
  <!-- /.row -->
</section>

<!-- DataTables -->
<?php echo $this->Html->css('AdminLTE./bower_components/datatables.net-bs/css/dataTables.bootstrap.min', ['block' => 'css']); ?>

<!-- DataTables -->
<?php echo $this->Html->script('AdminLTE./bower_components/datatables.net/js/jquery.dataTables.min', ['block' => 'script']); ?>
<?php echo $this->Html->script('AdminLTE./bower_components/datatables.net-bs/js/dataTables.bootstrap.min', ['block' => 'script']); ?>
<?php echo $this->Html->script('DataTables.cakephp.dataTables', ['block' => 'script']); ?>

[wash34000]

I have no error in log and no error in developper tools tabs in firefox. When i check network tab i can see the XHR request and CakePHP return full HTML content. When i open the request url in a new firefox windows i have the same index page, like no GET params interpret by my index action.

[dividedbynothing]

Hmmm... this might be similar to something that came up in another thread.

Can you try this:

1. remove or comment out: <?= $this->DataTables->table('products-table', $options, ['class' => 'table table-bordered table-hover']); ?>

2. and try this instead: <?= $this->Html->scriptBlock($this->DataTables->draw("#products-table", $options)) ?>

See if that helps.

[wash34000]

I try it but i have the same result : The XHR request return full html page instead of json. Do have a specific config for RequestHandler component ?

[ypnos]

I'm sorry I can not be of much help here, but in general I can tell you your problem is not directly related to this plugin.

As you mentioned, the RequestHandlerComponent is responsible for selecting the appropriate view based on the request type. The plugin does not interfer with that. Your routing might also play into it if request parameters are ignored.

[wash34000]

Could you give me your advise about my composer.json, maybe you know an incompatible require inside ;) ?

{
    "name": "cakephp/app",
    "description": "CakePHP skeleton app",
    "homepage": "https://cakephp.org",
    "type": "project",
    "license": "MIT",
    "require": {
        "php": ">=7.3",
        "cakedc/users": "^9.2",
        "cakephp/cakephp": "~4.2.0",
        "cakephp/migrations": "^3.0",
        "cakephp/plugin-installer": "^1.3",
        "friendsofcake/bootstrap-ui": "^3.0",
        "maiconpinto/cakephp-adminlte-theme": "^2.0",
        "mobiledetect/mobiledetectlib": "^2.8",
        "x-zolezzi/cakephp-datatables": "dev-master"
    },
    "require-dev": {
        "cakephp/bake": "^2.3",
        "cakephp/cakephp-codesniffer": "~4.2.0",
        "cakephp/debug_kit": "^4.4",
        "josegonzalez/dotenv": "^3.2",
        "phpunit/phpunit": "~8.5.0 || ^9.3",
        "psy/psysh": "@stable"
    },
    "suggest": {
        "markstory/asset_compress": "An asset compression plugin which provides file concatenation and a flexible filter system for preprocessing and minification.",
        "dereuromark/cakephp-ide-helper": "After baking your code, this keeps your annotations in sync with the code evolving from there on for maximum IDE and PHPStan/Psalm compatibility.",
        "phpstan/phpstan": "PHPStan focuses on finding errors in your code without actually running it. It catches whole classes of bugs even before you write tests for the code."
    },
    "autoload": {
        "psr-4": {
            "App\\": "src/"
        }
    },
    "autoload-dev": {
        "psr-4": {
            "App\\Test\\": "tests/",
            "Cake\\Test\\": "vendor/cakephp/cakephp/tests/"
        }
    },
    "scripts": {
        "post-install-cmd": "App\\Console\\Installer::postInstall",
        "post-create-project-cmd": "App\\Console\\Installer::postInstall",
        "check": [
            "@test",
            "@cs-check"
        ],
        "cs-check": "phpcs --colors -p  src/ tests/",
        "cs-fix": "phpcbf --colors -p src/ tests/",
        "stan": "phpstan analyse",
        "test": "phpunit --colors=always"
    },
    "prefer-stable": true,
    "config": {
        "sort-packages": true
    }
}

[alanapplyby]

@wash34000 did you find a solution to this issue - I have the same problem as you and can only get it to work with the $this->Html->scriptBlock approach...