Migrate datatables from client to server side

Author: nboisteault

assets/src/legacy/attributeTable.js

@@ -1544,8 +1544,13 @@ var lizAttributeTable = function() {
                             myDom = '<<t>ipl>';
                         }
 
+                        const datatablesUrl = globalThis['lizUrls'].wms.replace('service', 'datatables');
+                        const params = globalThis['lizUrls'].params;
+                        params['layerId'] = lConfig.id;
+
                         $( aTable ).dataTable( {
-                            data: dataSet
+                            serverSide: true
+                            ,ajax: datatablesUrl + '?' + new URLSearchParams(params).toString()
                             ,columns: columns
                             ,initComplete: function(settings, json) {
                                 const api = new $.fn.dataTable.Api(settings);
@@ -1562,13 +1567,13 @@ var lizAttributeTable = function() {
                             ,order: [[ firstDisplayedColIndex, "asc" ]]
                             ,language: { url:globalThis['lizUrls']["dataTableLanguage"] }
                             ,deferRender: true
-                            ,createdRow: function ( row, data, dataIndex ) {
-                                if ( $.inArray( data.DT_RowId.toString(), lConfig['selectedFeatures'] ) != -1
-                                ) {
-                                    $(row).addClass('selected');
-                                    data.lizSelected = 'a';
-                                }
-                            }
+                            // ,createdRow: function ( row, data, dataIndex ) {
+                            //     if ( $.inArray( data.DT_RowId.toString(), lConfig['selectedFeatures'] ) != -1
+                            //     ) {
+                            //         $(row).addClass('selected');
+                            //         data.lizSelected = 'a';
+                            //     }
+                            // }
                             ,drawCallback: function (settings) {
                                 // rendering ok, find img with data-attr-thumbnail
                                 const thumbnailColl = document.getElementsByClassName('data-attr-thumbnail');
@@ -1577,7 +1582,7 @@ var lizAttributeTable = function() {
                                 }
                             }
                             ,dom: myDom
-                            ,pageLength: 50
+                            ,pageLength: 10
                             ,scrollY: '95%'
                             ,scrollX: '100%'
 
@@ -1661,11 +1666,11 @@ var lizAttributeTable = function() {
                 const columns = [];
                 let firstDisplayedColIndex = 0;
                 // Column with selected status
-                columns.push( {"data": "lizSelected", "width": "25px", "searchable": false, "sortable": true, "visible": false} );
-                firstDisplayedColIndex+=1;
+                // columns.push( {"data": "lizSelected", "width": "25px", "searchable": false, "sortable": true, "visible": false} );
+                // firstDisplayedColIndex+=1;
 
-                columns.push({ "data": "featureToolbar", "width": "25px", "searchable": false, "sortable": false});
-                firstDisplayedColIndex += 1;
+                // columns.push({ "data": "featureToolbar", "width": "25px", "searchable": false, "sortable": false});
+                // firstDisplayedColIndex += 1;
 
                 // Add column for each field
                 for (var columnName in atFeatures[0].properties){
@@ -1897,11 +1902,11 @@ var lizAttributeTable = function() {
 
                     // Add row ID
                     line['DT_RowId'] = fid;
-                    line['lizSelected'] = 'z';
+                    // line['lizSelected'] = 'z';
 
-                    if( selectedFeatures && $.inArray( fid, selectedFeatures ) != -1 )
-                        line.lizSelected = 'a';
-                    line['featureToolbar'] = `<lizmap-feature-toolbar value="${layerId + '.' + fid}" ${isChild ? `parent-layer-id="${parentLayerID}"`: ''} ${pivotId ? `pivot-layer="${pivotId}"`: ''}></lizmap-feature-toolbar>`;
+                    // if( selectedFeatures && $.inArray( fid, selectedFeatures ) != -1 )
+                    //     line.lizSelected = 'a';
+                    // line['featureToolbar'] = `<lizmap-feature-toolbar value="${layerId + '.' + fid}" ${isChild ? `parent-layer-id="${parentLayerID}"`: ''} ${pivotId ? `pivot-layer="${pivotId}"`: ''}></lizmap-feature-toolbar>`;
 
                     // Build table lines
                     for (var idx in feat.properties){

lizmap/modules/lizmap/controllers/datatables.classic.php

@@ -0,0 +1,80 @@
+<?php
+
+/**
+ * Send data to datatables ajax requests.
+ *
+ * @author    3liz
+ * @copyright 2025 3liz
+ *
+ * @see      https://3liz.com
+ *
+ * @license Mozilla Public License : http://www.mozilla.org/MPL/
+ */
+
+use Lizmap\Request\WFSRequest;
+
+class datatablesCtrl extends jController
+{
+    public function index()
+    {
+        $rep = $this->getResponse('binary');
+        $rep->outputFileName = 'datatables.json';
+        $rep->mimeType = 'application/json';
+
+        // Lizmap parameters
+        $repository = $this->param('repository');
+        $project = $this->param('project');
+        $layerId = $this->param('layerId');
+
+        // DataTables parameters
+        $DTStart = $this->param('start');
+        $DTLength = $this->param('length');
+
+        $DTOrder = $this->param('order');
+        $DTColumns = $this->param('columns');
+        $DTOrderColumnIndex = $DTOrder[0]['column'];
+        $DTOrderColumnDirection = $DTOrder[0]['dir'] == 'desc' ? 'd' : '';
+        $DTOrderColumnName = $DTColumns[$DTOrderColumnIndex]['data'];
+
+        $DTSearch = $this->param('search');
+
+        $lproj = lizmap::getProject($repository.'~'.$project);
+        $layer = $lproj->getLayer($layerId);
+        $typeName = $layer->getWfsTypeName();
+
+        $wfsparams = array(
+            'SERVICE' => 'WFS',
+            'VERSION' => '1.0.0',
+            'REQUEST' => 'GetFeature',
+            'TYPENAME' => $typeName,
+            'OUTPUTFORMAT' => 'GeoJSON',
+            'GEOMETRYNAME' => 'none',
+            'MAXFEATURES' => $DTLength,
+            'SORTBY' => $DTOrderColumnName.' '.$DTOrderColumnDirection,
+            'STARTINDEX' => $DTStart,
+        );
+
+        $wfsrequest = new WFSRequest($lproj, $wfsparams, lizmap::getServices());
+        $wfsresponse = $wfsrequest->process();
+        $featureData = $wfsresponse->getBodyAsString();
+        $jsonFeatures = json_decode($featureData)->features;
+        $data = array();
+        foreach ($jsonFeatures as $key => $feature) {
+            $data[] = $feature->properties;
+        }
+        // jLog::log(var_export(, true), 'error');
+
+        $returnedData = array(
+            'draw' => (int) $this->param('draw'),
+            'recordsTotal' => 31, // TODO: get the total number of features
+            'recordsFiltered' => 31,
+            'data' => $data,
+            // 'error' => 'error',
+        );
+
+        $rep->content = json_encode($returnedData);
+        // $rep->content = $wfsresponse;
+
+        return $rep;
+    }
+}