Merge multiple columns into a new column

peterbrowne

I want to merge multiple columns into a new column just for the merged columns, not including any other data. Columns are 4 to 11 inclusive as per code below.

I also want to format the contents (the merged data) of that cell like (numeric values dependant of the data of course):

Low Vision: 2
Contact Lenses: 4
Paediatrics: 7
Binocular Vision: 1
Vision Therapy: 5
Therapeutics: 0
Research: 10
Other: 0

The code hides the correct columns, but none of those columns show data in column 0. I also want a new column just for the merged data, not sure how to do that.

var table = $( '#learning_event_table' ).DataTable( {
                responsive: true,
                "autoWidth": false,
                "lengthMenu": [
                    [ 5, 10, 25, 50, -1 ],
                    [ 5, 10, 25, 50, "All" ]
                ],
                columnDefs: [ {
                      render: function ( data, type, row ) {
                    return data +' ('+ row[3]+')';
                },
                targets: 0
            },
            { visible: false,  targets: [ 4,5,6,7,8,9,10,11 ] }
                 ],
                ajax: "program_data/learning_event_test_only_data.php",
                dom: "Blfrtip",
                columns: [ {
                    data: "learning_event.learning_event_name",
                    width: '15%'
                }, {
                    data: "learning_event.outline",
                    width: '15%'
                }, {
                    data: "program_outcome",
                    render: "[, ].program_outcome"
                }, {
                    data: "unit_group.unit_group"
                }, {
                    data: "learning_event.low_vision",
                    width: '15%'
                }, {
                    data: "learning_event.contact_lenses",
                    width: '15%'
                }, {
                    data: "learning_event.paediatrics",
                    width: '15%'
                }, {
                    data: "learning_event.binocular_vision",
                    width: '15%'
                }, {
                    data: "learning_event.vision_therapy",
                    width: '15%'
                }, {
                    data: "learning_event.therapeutics",
                    width: '15%'
                }, {
                    data: "learning_event.research",
                    width: '15%'
                },  {
                    data: "learning_event.other",
                    width: '15%'
                }, {
                    data: "presentation",
                    render: "[, ].presentation_name"
                }, {
                    data: "mcondition",
                    render: "[, ].mcondition_name"
                }, {
                    data: "learning_event_type",
                    render: "[, ].learning_event_type_name"
                }, {
                    data: "learning_event.modified"
                }, {
                    data: "learning_event.modified_by"
                }, {
                    data: null,
                    className: "center",
                    defaultContent: '<a href="" class="editor_edit">Edit</a>'
                } ],
                select: {
                    style: 'os',
                    selector: 'td:first-child'
                },
                buttons: []
            } );

peterbrowne

This works for me:

var table = $( '#learning_event_table' ).DataTable( {
                responsive: true,
                "autoWidth": false,
                "lengthMenu": [
                    [ 5, 10, 25, 50, -1 ],
                    [ 5, 10, 25, 50, "All" ]
                ],
                columnDefs: [ {
                    targets: 1,
                    render: $.fn.dataTable.render.ellipsis( 150, true )
                } ],
                ajax: "program_data/learning_event_test_only_data.php",
                dom: "Blfrtip",
                columns: [ {
                    data: "learning_event.learning_event_name",
                    width: '15%'
                }, {
                    data: "learning_event.outline",
                    width: '15%'
                }, {
                    data: "program_outcome",
                    render: "[, ].program_outcome"
                }, {
                    data: "unit_group.unit_group"
                }, {
                    width: '15%',
                    render: function(data, type, row, meta){
                     return 'Low Vision - ' + row.learning_event.low_vision + '<br>Contact Lenses - ' + row.learning_event.contact_lenses + '<br>Paediatrics - ' + row.learning_event.paediatrics + '<br>Binocular Vision - ' + row.learning_event.binocular_vision + '<br>Vision Therapy - ' + row.learning_event.vision_therapy + '<br>Therapeutics - ' + row.learning_event.therapeutics + '<br>Research - ' + row.learning_event.research + '<br>Other - ' + row.learning_event.other;
                 }
                }, {
                    data: "presentation",
                    render: "[, ].presentation_name"
                }, {
                    data: "mcondition",
                    render: "[, ].mcondition_name"
                }, {
                    data: "learning_event_type",
                    render: "[, ].learning_event_type_name"
                }, {
                    data: "learning_event.modified"
                }, {
                    data: "learning_event.modified_by"
                }, {
                    data: null,
                    className: "center",
                    defaultContent: '<a href="" class="editor_edit">Edit</a>'
                } ],
                select: {
                    style: 'os',
                    selector: 'td:first-child'
                },
                buttons: []
            } );