I am currently working on a project for which I am using Symfony 6.0 as the PHP framework. Now I wanted to use DataTables with server side processing, but still make use of the Doctrine engine. Therefore I transferred the core aspects like loading entries, filtering, ordering, etc. into a service that should be reusable for each table.

My starting point for the code was the following post: http://growingcookies.com/datatables-server-side-processing-in-symfony/

Below you can find the code for the service. The code for the controller, repository, view and js will be in the comments.^^

Remark: I have not yet tested the functionality of the function "addJoins" for performing joins. Nevertheless, you can find the current code for this in the service and repository.

I thought I'd share my result with you and maybe it will help one or the other of you. If you have any suggestions for improvement or comments, I'm curious

Best regards
Schwaluck

Service

// src/Service/DataTableService.php
namespace App\Service;

class DataTableService {

    public function getData($request, $repository, $furtherConditions=""): string {
        
        // Get the parameters from the Ajax Call
        if ($request->getMethod() == 'POST') {
            $parameters = $request->request->all();
            $draw = $parameters['draw'];
            $start = $parameters['start'];
            $length = $parameters['length'];
            $search = $parameters['search'];
            $orders = $parameters['order'];
            $columns = $parameters['columns'];
        }
        else
            die;
        
        //Order the Entries for the table
        foreach ($orders as $key => $order){
            $orders[$key]['name'] = $columns[$order['column']]['name'];
        }

        // Get results from the Repository
        $results = $repository->getTableData($start, $length, $orders, $search, $columns, $furtherConditions = null);
        $objects = $results["results"];
        
        // Get total number of objects
        $total_objects_count =  $repository->countObjects();
        
        // Get total number of results
        $selected_objects_count = count($objects);
        
        // Get total number of filtered data
        $filtered_objects_count = $results["countResult"];
        
        // Construct response
        $response = '{
            "draw": '.$draw.',
            "recordsTotal": '.$total_objects_count.',
            "recordsFiltered": '.$filtered_objects_count.',
            "data": [';
        
        $i = 0;
        
        foreach ($objects as $key => $object) {
            $response .= '["';
            
            $j = 0; 
            $nbColumn = count($columns);
            foreach ($columns as $key => $column) {
                // In all cases where something does not exist or went wrong, return -
                $responseTemp = "-";
                
                $functionName = 'get'.$column['name'];

                if ($functionName != "get")
                    $responseTemp = $object->$functionName();
               
               // Add the found data to the json
               $response .= $responseTemp;
               
               if(++$j !== $nbColumn)
               $response .='","';
            }
            
            $response .= '"]';
            
            // Not on the last item
            if(++$i !== $selected_objects_count)
                $response .= ',';
        }
        
        $response .= ']}';

        return $response;
    }
        
    public function countObjectsInTable($countQuery, $table) {
        return $countQuery->select("COUNT($table)");
    }

    public function setLength($countQuery, $length) {
        $countResult = $countQuery->getQuery()->getSingleScalarResult();
        if ($length == -1) {
            $length = $countResult;
        }
        return $countResult;
    }

    public function addJoins($query, $countQuery, $joins) {
        for($i = 0; $i < count($joins); $i++) {
            $query->join($joins[$i].$joins[$i][1], $joins[$i][2]);
            $countQuery->join($joins[$i].$joins[$i][1], $joins[$i][2]);              
        }  
    }

    public function addConditions($query, $conditions) {
        if ($conditions != null) {
            // Add condition
            $query->where($conditions);
            $countQuery->where($conditions);
        }
    }

    public function performSearch($query, $countQuery,$table, $columns, $search) {
    
        $searchItem = $search['value'];
        $searchQuery = "";
        
        for($i = 0; $i < count($columns); $i++) {

            if($i < count($columns)-1) {
                if($columns[$i]['searchable'] == "true" && $columns[$i]['name'] != "")
                    $searchQuery .= $table.'.'.$columns[$i]['name'].' LIKE '.'\'%'.$searchItem.'%\''.' OR ';
            }
            else {
                if($columns[$i]['searchable'] == "true" && $columns[$i]['name'] != "")
                    $searchQuery .= $table.'.'.$columns[$i]['name'].' LIKE '.'\'%'.$searchItem.'%\'';
            }

        }
        $query->andWhere($searchQuery);
        $countQuery->andWhere($searchQuery);
    }    
    
    public function addLimits($query, $start, $length) {
        return $query->setFirstResult($start)->setMaxResults($length);
    }
    
    public function performOrdering($query, $orders, $table) {
        foreach ($orders as $key => $order) {
            if ($order['name'] != '') {
                
                $orderColumn = null;
                
                $orderColumn = "{$table}.{$order['name']}";
                    
                if ($orderColumn !== null) {
                    $query->orderBy($orderColumn, $order['dir']);
                }
            }
        }
    }
}

SearchPane is currently "experimental", in the sense that it hasn't been released as a full extension for DataTables and all that entails, as I would like to get some early feedback on the software. Is it useful? What is it missing? I'll maintain a list of requests in this post so we don't end up with too many duplicates.

Regards,
Allan

Feature list

• Full support for Bootstrap, Foundation, Semantic UI, etc.
• Server-side processing support (loading data from the server-side)
• Have the count show two numbers - the first would be how many remain in the filtered set and the second would be how many in the table overall.
• Ordering of data to match the DataTable
• Search the search pane!
• Rebuild API method for selected columns
• Collapsible container
• Support for array based data
• Interfacing with the global search (difficult?)
• Selection options similar to Select (e.g. os and multi, etc.)
• Option to match column visibility (with or without Responsive?)

After I added this snippet of code to my report everyone else started giving this problem.

When it started to have this problem, I automatically left the column invisible but it still gives me a problem:

{ "visible": false, "targets": vm.props.filter.ReportTypeFvsId == 1 ? [15] : null },

{
                                targets: [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18],
                                render: function (data, type, row, meta) {
                                    if (vm.props.filter.modelTypeId == 4 && vm.props.filter.tipoRelatorioAvaId == 3) {
                                        if (meta.col == 9) {
                                            return data;
                                        }
                                        else if (meta.col == 16) {
                                            return data;
                                        }
                                        var fichas = '';
                                        switch (meta.col) {
                                            case 3: fichas = row.JANID
                                                break;
                                            case 4: fichas = row.FEVID
                                                break;
                                            case 5: fichas = row.MARID
                                                break;
                                            case 6: fichas = row.ABRID
                                                break;
                                            case 7: fichas = row.MAIID
                                                break;
                                            case 8: fichas = row.JUNID
                                                break;
                                            case 10: fichas = row.JULID
                                                break;
                                            case 11: fichas = row.AGOID
                                                break;
                                            case 12: fichas = row.SETID
                                                break;
                                            case 13: fichas = row.OUTID
                                                break;
                                            case 14: fichas = row.NOVID
                                                break;
                                            case 15: fichas = row.DEZID
                                                break;
                                        }
                                    }
                                    else if (vm.props.filter.modelTypeId == 4 && vm.props.filter.tipoRelatorioAvaId == 4) {
                                        var fichas = '';
                                        if (meta.col == 6) {
                                            return data;
                                        }
                                        else if (meta.col == 10) {
                                            return data;
                                        }
                                        else if (meta.col == 14) {
                                            return data;
                                        }
                                        else if (meta.col == 18) {
                                            return data;
                                        }
                                        switch (meta.col) {
                                            case 3: fichas = row.JANID
                                                break;
                                            case 4: fichas = row.FEVID
                                                break;
                                            case 5: fichas = row.MARID
                                                break;
                                            case 7: fichas = row.ABRID
                                                break;
                                            case 8: fichas = row.MAIID
                                                break;
                                            case 9: fichas = row.JUNID
                                                break;
                                            case 11: fichas = row.JULID
                                                break;
                                            case 12: fichas = row.AGOID
                                                break;
                                            case 13: fichas = row.SETID
                                                break;
                                            case 15: fichas = row.OUTID
                                                break;
                                            case 16: fichas = row.NOVID
                                                break;
                                            case 17: fichas = row.DEZID
                                                break;
                                        }
                                    }
                                    if (vm.props.filter.modelTypeId == 4) {
                                    var mediaS1 = row.PrimeiraMediaSemestral;
                                    var mediaS2 = row.SegundaMediaSemestral;

                                    var mediaT1 = row.PrimeiraMediaTrimestral;
                                    var mediaT2 = row.SegundaMediaTrimestral;
                                    var mediaT3 = row.TerceiraMediaTrimestral;
                                    var mediaT4 = row.QuartaMediaTrimestral;
                                    }
                                    if (vm.props.filter.modelTypeId == 4 && vm.props.filter.tipoRelatorioAvaId == 3) {
                                        if (mediaS1 != undefined && parseFloat(data.replace(",", ".")) < parseFloat(mediaS1.replace(",", "."))) {
                                            data = '<a onclick="abrirModal([' + fichas.toString() + '])" data-toggle="tooltip" data-placement="top" style="color:#f00"; title="Abrir Avaliação">' + data + '</a>';
                                        }
                                        else if (mediaS2 != undefined && parseFloat(data.replace(",", ".")) < parseFloat(mediaS2.replace(",", "."))) {
                                            data = '<a onclick="abrirModal([' + fichas.toString() + '])" data-toggle="tooltip" data-placement="top"  title="Abrir Avaliação">' + data + '</a>';
                                        }
                                    }
                                    else if (vm.props.filter.modelTypeId == 4 && vm.props.filter.tipoRelatorioAvaId == 4) {
                                        if (mediaT1 != undefined && parseFloat(data.replace(",", ".")) < parseFloat(mediaT1.replace(",", "."))) {
                                            data = '<a onclick="abrirModal([' + fichas.toString() + '])" data-toggle="tooltip" data-placement="top" style="color:#f00"; title="Abrir Avaliação">' + data + '</a>';
                                        }
                                        else if (mediaT2 != undefined && parseFloat(data.replace(",", ".")) < parseFloat(mediaT2.replace(",", "."))) {
                                            data = '<a onclick="abrirModal([' + fichas.toString() + '])" data-toggle="tooltip" data-placement="top" style="color:#f00"; title="Abrir Avaliação">' + data + '</a>';
                                        }
                                        else if (mediaT3 != undefined && parseFloat(data.replace(",", ".")) < parseFloat(mediaT3.replace(",", "."))) {
                                            data = '<a onclick="abrirModal([' + fichas.toString() + '])" data-toggle="tooltip" data-placement="top" style="color:#f00"; title="Abrir Avaliação">' + data + '</a>';
                                        }
                                        else if (mediaT4 != undefined && parseFloat(data.replace(",", ".")) < parseFloat(mediaT4.replace(",", "."))) {
                                            data = '<a onclick="abrirModal([' + fichas.toString() + '])" data-toggle="tooltip" data-placement="top"  title="Abrir Avaliação">' + data + '</a>';
                                        }
                                    }
                                    return data;
                                }
                            }

Under "Destroying a DataTable", it calls the following code:

function destroyChild(row) {
    var table = $("table", row.child());
    table.detach();
    table.DataTable().destroy();
 
    // And then hide the row
    row.child.hide();
}

I'm not keying in on the purpose of table.detach();.

If I'm destroying the DataTable to prevent a memory leak, doesn't table.detach(); rather than table.remove(); run the same risk?

Or does table.DataTable().destroy(); clean it all up anyway?

And if so, why call table.detach(); or table.remove(); at all?

I have a data table that only has the purpose to allow the user to make a preselection of departments using a checkbox. Editor is required to create or delete an entry in the link table between "user" and "department". On change of the checkbox I submitted an edit request to server if the box was checked and a remove request if the box was unchecked.
This worked ok. The only issue was that Editor on the client side removed the entire row from the display even though only the link table entry was removed. I found a workaround. I simply replaced the remove request by submitting null to the server. This also removes the link table entry while keeping the row at the front end.

Here is my code example (Javascript):

var ctrDeptSelectionEditor = new $.fn.dataTable.Editor({
    ajax: {
        url: 'actions.php?action=tblCtrDeptSelection'
    },
    table: "#tblCtrDeptSelection",
    fields: [ {
            name:      "user[].id",
            type:      "checkbox"
        }
    ]        
});

var ctrDeptSelectionTable = $('#tblCtrDeptSelection').DataTable({
    dom: "Bfrltip",
    select: false,
    ajax: {
        url: 'actions.php?action=tblCtrDeptSelection'
    },
    columns: [
        {   data: "user[].id",
            render: function ( data, type, row ) {
                if ( type === 'display' ) {
                    return '<input type="checkbox" class="editor-include">';
                }
                return data;
            }
        },
        {   data: "ctr_govdept.dept_name" },
        {   data: "userRole",
            render: function ( data, type, row ) {
                return renderRole(data);
            }
        },
        {   data: "ctr_installation", render: "[,<br>].instName"  },
        {   data: "gov", render: "[,<br>].govName"  },
        {   data: "gov", render: "[,<br>].govRegional12"  }
    ],
    order: [[1, 'asc'], [0, 'asc']],
    buttons: [
           "colvis" 
    ],
    rowCallback: function ( row, data ) {
        // Set the checked state of the checkbox in the table
        $('input.editor-include', row).prop( 'checked', data.user_has_selected_ctr_govdept.user_id >= 1 );
        if ( data.user_has_selected_ctr_govdept.user_id >= 1 ) {
            $(row).addClass('fontThick');
        } else {
            $(row).removeClass('fontThick');
        }
    }    
});
    
$('#tblCtrDeptSelection').on( 'change', 'input.editor-include', function () {
    var uid = [];
    if ( $(this).prop( 'checked' ) >= 1) {
        uid = [currentUserId];
    } else {
        uid = [null];
    }
    ctrDeptSelectionEditor
        .edit( $(this).closest('tr'), false )
        .set( 'user[].id', uid )
        .submit();            
} );

How does this affect the child elements (in the database) when you delete a parent element? Do they become "lost" or do they get deleted too?

Thanks,
Harsha

I rely on the Datatables feed to keep track of the latest releases, and I noticed that the feed is now empty whereas it was working a few days ago.

https://www.datatables.net/feeds/releases.xml

Is this expected? Also, is there a way to keep a track of the blog posts separately? I only noticed one feed URL in the source code of the blog's home page. Thanks!