row grouping, Editor and combined values in single column

mf

Hello all,

I am trying to combine a few examples but the row grouping example only works aslong as I don't combine values and I have this in Editor.

Most likely I'm doing something wrong, when I do this for column 0 in .js

{ data: null, render: function ( data, type, row ) {
                // Combine into a single table field
                return data.dealercontacts.dealernr+' '+data.dealers.naam;
            } }

and use this code also in .js

        "drawCallback": function ( settings ) {
            var api = this.api();
            var rows = api.rows( {page:'current'} ).nodes();
            var last=null; 
            api.column(0, {page:'current'} ).data().each( function ( group, i ) {
                if ( last !== group ) {
                    $(rows).eq( i ).before(
                        '<tr class="group"><td colspan="5">'+group+'</td></tr>'
                    );
                     last = group;
                }
            } );

I see [object Object] and if I use only

{ "data": "dealercontacts.dealernr" }

then it works fine so my guess is that it has something to do with the combined values but I have no idea how to solve, I hope anyone can tell me? Thanks!

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

The issue is because column().data() is being used. That will get the original data object for the column. But that doesn't include the rendered data since that is just a calculation (data: null).

To get the rendered data use cell().render() (or cells().render()).

It might also be worth looking into the RowGroup extension which will perhaps reduce the amount of custom code needed.

Allan

mf

Thanks!

mf

Dear Allan, I gave the rowgroup extension a try because for a beginner like me, I rather avoid too much custom code. But its not grouping any column at all, they are grey empty rows and I referenced to the rowGroup.dataTables.min.css and dataTables.rowGroup.min.js. I'd like to group column 0 first preferably on the combined data. Maybe I am combining too much?

Also I have been trying to understand how to post code correctly, it shows okay for only some part, shouldn't that be idiot proof?

`(function($){
$(document).ready(function() {
var editor = new $.fn.dataTable.Editor( {
ajax: 'php/table.dealercontacts.php',
table: '#dealercontacts',
fields: [
{
label: "dealernr:",
name: "dealercontacts.dealernr",
type: "select",
placeholder: "Selecteer een Dealer"
},
{
"label": "firstname:",
"name": "dealercontacts.firstname"
},
{
"label": "initials:",
"name": "dealercontacts.initials"
},
{
"label": "lastname:",
"name": "dealercontacts.lastname"
},
{
"label": "emailaddress:",
"name": "dealercontacts.emailaddress"
},
{
"label": "telephone:",
"name": "dealercontacts.telephone"
},
{
label: "xstop:",
name: "dealercontacts.xstop",
type: "checkbox",
separator: "|",
options: [
{ label: '', value: 1 }
]
}
]
} );
var table = $('#dealercontacts').DataTable( {
ajax: 'php/table.dealercontacts.php',
columns: [
{ "data": "dealercontacts.dealernr" },

        /*{ data: null, render: function ( data, type, row ) {
            // Combine 
            return data.dealercontacts.dealernr+' '+data.dealers.naam;
        } },*/          
        { "data": "dealercontacts.dealercontacts_id" },          
        { data: null, render: function ( data, type, row ) {
            // Combine the first and last names into a single table field
            return data.dealercontacts.initials+' '+data.dealercontacts.firstname+' '+data.dealercontacts.lastname;
        } },          
        { "data": "dealercontacts.emailaddress" },
        { "data": "dealercontacts.telephone" },
        {
            data:   "dealercontacts.xstop",
            render: function ( data, type, row ) {
                if ( type === 'display' ) {
                    return '<input type="checkbox" class="editor-active">';
                }
                return data;
            },
            className: "dt-body-center"
        }
    ],
    rowGroup: {
        // Group by dealercontacts.dealernr
        dataSrc: 0
    },
    select: {
        style: 'os',
        selector: 'td:not(:last-child)' // no row selection on last column
    },
    rowCallback: function ( row, data ) {
        // Set the checked state of the checkbox in the table
        $('input.editor-active', row).prop( 'checked', data.dealercontacts.xstop == 1 );
    }      
} );

$('#dealercontacts').on( 'change', 'input.editor-active', function () {
    editor
        .edit( $(this).closest('tr'), false )
        .set( 'dealercontacts.xstop', $(this).prop( 'checked' ) ? 1 : 0 )
        .submit();
} );
new $.fn.dataTable.Buttons( table, [
    { extend: "create", editor: editor },
    { extend: "edit",   editor: editor },
    { extend: "remove", editor: editor }
] );
table.buttons().container()
    .appendTo( $('.col-sm-6:eq(0)', table.table().container() ) );

} );
}(jQuery)); `

Dalex73

I had the same problem as well, the solution when using ajax is to have the data point instead of the column. So datasrc:0 would be datasrc:dealercontacts.dealernr.

Writing on my phone now not in front of a computer so might look a bit weird.

mf

Dear Dalex3, thanks for taking the trouble to answer on your phone! it works :)

mf

only one problem though, I don't see how I can add more information from other columns into the group row, first I thought of adding more columns in the table, make them invisible and show them like this

dataSrc: 0,2,3

or this

dataSrc: 'dealercontacts.dealernr', 'dealers.naam', ......

I'm not a coder at all so I need working examples, without datatables editor I can manage because the internet is full of many many examples but datatables editor is limited to what is available on this site. I actually did it in the normal datatable (just not editor) probably because I am not using ajax there. Anyway, I have no clue how to do it with table.cell().render() I don't how I can tell the code what exact cell it needs.

Anyway, could I left join with a view instead of a table? in that case I just make a view with the columns I would like to see combined.

allan

There are several examples for how to use RowGroup available here. The one you want is Custom row rendering / aggregates.

See also the reference documentation: rowGroup.startRender and rowGroup.endRender.

Allan

mf

Thanks, I will try when I have more experience