Merge multiple columns into a new column

Merge multiple columns into a new column

peterbrownepeterbrowne Posts: 247Questions: 40Answers: 0
edited August 10 in Editor

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: []
            } );

Answers

  • peterbrownepeterbrowne Posts: 247Questions: 40Answers: 0

    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: []
                } );
    
Sign In or Register to comment.