5

Few days i was trying to achieve a dataTable print view with a row grouping but still its not going to work.. :(

I have a dataTable, where one column is hidden and that column is row grouped. Same as in this example: https://datatables.net/examples/advanced_init/row_grouping.html

And i am using a Buttons Extension (https://datatables.net/extensions/buttons/) for Print button. And when i hit the print button, i see all the columns of my dataTable even the one column shoud be hidden. Then i used an option "columns": ":visible", to print only visible columns, but it's again not good, because the grouped row is missing.

So does anyone know how to get the same table in Print view with row grouping as the original dataTable?

table = $('#vartTable').DataTable({
            "dom": "Bt",
            "paging": false,
            "fixedHeader": {   
                "headerOffset": -10
            },
            "autoWidth": false,
            "ordering": false,
            "data": data,
            "columns": [
                {"data": "path",},
                {
                    "data": "username",
                    "render": function(data, type, row) {
                        return '<a href="User-view.do?varId=' + row.id + '">' + row.username+ '</a>';
                    }
                },
                {
                    "data": "name",
                    "render": function (data, type, row) {
                        return row.name+ ' ' + row.surname;
                    }
                },
                {"data": "details"}
            ],
            "columnDefs": [{"visible": false, "targets": 0}],

            "buttons": [
                {
                    "extend": 'print',
                    "title": "",
                    "text": 'Print current page',
                    "autoPrint": false,
                    "exportOptions": {
                        "columns": ':visible',
                        "modifier": {
                            "page": 'current'
                        }
                    }
                }
            ],
            "drawCallback": function () {
                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><td colspan="3" class="group">' + group + '</td></tr>');
                        last = group;
                    }
                });
            }
        });
4
  • Throw up some of your code! Dec 17, 2015 at 7:16
  • i updated my question (added code)
    – Null
    Dec 17, 2015 at 7:31
  • 1
    Most likely this is impossible as for now, see Print button reference, print view is created by copying the original table which doesn't preserve certain things. Dec 18, 2015 at 3:58
  • 1
    Seems this feature isn't implemented yet: datatables.net/forums/discussion/32120/…
    – Null
    Apr 29, 2016 at 7:49

2 Answers 2

2

Exporting row groping is not supported feature in Datatable. you have to add your grouping code inside __exportData function in datatables.buttons.js file to add grouped rows to data before exporting as below

var grouped_array_index=config.grouped_array_index;                     //customised
    var no_of_columns = header.length;
    var no_of_rows = no_of_columns > 0 ? cells.length / no_of_columns : 0;
    var body = new Array( no_of_rows );
        var body_data = new Array( no_of_rows );                                //customised
        var body_with_nodes = new Array( no_of_rows );                          //customised
        var body_with_nodes_static = new Array( no_of_rows );                          //customised
    var cellCounter = 0;

    for ( var i=0, ien=no_of_rows ; i<ien ; i++ ) {
        var rows = new Array( no_of_columns );
                var rows_with_nodes = new Array( no_of_columns );
        for ( var j=0 ; j<no_of_columns ; j++ ) {
            rows[j] = config.format.body( cells[ cellCounter ], i, j, cellNodes[ cellCounter ] );
                        rows_with_nodes[j] = config.format.body( cellNodes[ cellCounter ], i, j, cells[ cellCounter ] ).outerHTML;
            cellCounter++;
        }
        body[i] = rows;
                body_data[i] = rows;
                body_with_nodes[i] = $.parseHTML('<tr class="even">'+rows_with_nodes.join("")+'</tr>');
                body_with_nodes_static[i] = $.parseHTML('<tr class="even">'+rows_with_nodes.join("")+'</tr>');
    }
        //console.log(dt.rows().nodes());
        /******************************************** GROUP DATA *****************************************************/
        var row_array=dt.rows().nodes();
        var row_data_array=dt.rows().data();
        var iColspan =no_of_columns;
        var sLastGroup = "";
        var inner_html='',grouped_index;
        var individual_group_array= new Array(),sub_group_array= new Array(),total_group_array= new Array();
        var no_of_splices=0;  //to keep track of no of element insertion into the array as index changes after splicing one element
        for ( var i=0, row_length=body_with_nodes.length ; i< row_length; i++ ){
            sub_group_array[i]= new Array();
            individual_group_array[i]= new Array();  
            var sGroup='';
            for(var k=0;k<grouped_array_index.length;k++){
                sGroup = sGroup+''+row_data_array[i][grouped_array_index[k]]+' ';
                inner_html=row_data_array[i][grouped_array_index[k]];
                grouped_index=k;
                individual_group_array[i][k]=row_data_array[i][grouped_array_index[k]];
                sub_group_array[i][k]=sGroup;
            }
            total_group_array[i]=sGroup;
            if ( sGroup !== sLastGroup ){
                var table_data=[];
                var table_data_with_node='';

                for(var $column_index=0;$column_index<iColspan;$column_index++){
                    if($column_index===0){
                        table_data_with_node+='<td style="border-left:none;border-right:none">'+inner_html+'</td>';
                        table_data[$column_index]=inner_html+" ";
                    }    
                    else{
                        table_data_with_node+='<td style="border-left:none;border-right:none"></td>';
                        table_data[$column_index]='';
                    }
                }

                body_with_nodes.splice(i+no_of_splices,0,$.parseHTML('<tr class="group group_'+grouped_index+' grouped-array-index_'+grouped_array_index[grouped_index]+'">'+table_data_with_node+'</tr>'));
                body_data.splice(i+no_of_splices,0,table_data);
                no_of_splices++;
                sLastGroup = sGroup;
            }
        }
1
  • Can you show the demo? I tried your code but unable to print the group. May 18, 2021 at 13:59
0

Here is my code, which is a modified version of the answer by Vinothkumar S

var _exportData = function (dt, inOpts) {

    var config = $.extend(true, {}, {
        rows: null,
        columns: '',
        grouped_array_index: [],
        modifier: {
            search: 'applied',
            order: 'applied'
        },
        orthogonal: 'display',
        stripHtml: true,
        stripNewlines: true,
        decodeEntities: true,
        trim: true,
        format: {
            header: function (d) {
                return strip(d);
            },
            footer: function (d) {
                return strip(d);
            },
            body: function (d) {
                return strip(d);
            }
        }

    }, inOpts);

    var strip = function (str) {
        if (typeof str !== 'string') {
            return str;
        }

        // Always remove script tags
        str = str.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');

        if (config.stripHtml) {
            str = str.replace(/<[^>]*>/g, '');
        }

        if (config.trim) {
            str = str.replace(/^\s+|\s+$/g, '');
        }

        if (config.stripNewlines) {
            str = str.replace(/\n/g, ' ');
        }

        if (config.decodeEntities) {
            _exportTextarea.innerHTML = str;
            str = _exportTextarea.value;
        }

        return str;
    };


    var header = dt.columns(config.columns).indexes().map(function (idx) {
        var el = dt.column(idx).header();
        return config.format.header(el.innerHTML, idx, el);
    }).toArray();

    var footer = dt.table().footer() ?
        dt.columns(config.columns).indexes().map(function (idx) {
            var el = dt.column(idx).footer();
            return config.format.footer(el ? el.innerHTML : '', idx, el);
        }).toArray() :
        null;

    var rowIndexes = dt.rows(config.rows, config.modifier).indexes().toArray();
    var selectedCells = dt.cells(rowIndexes, config.columns);
    var cells = selectedCells
        .render(config.orthogonal)
        .toArray();
    var cellNodes = selectedCells
        .nodes()
        .toArray();

    var grouped_array_index = config.grouped_array_index;                     //customised
    var no_of_columns = header.length;
    var no_of_rows = no_of_columns > 0 ? cells.length / no_of_columns : 0;
    var body = new Array(no_of_rows);
    var body_data = new Array(no_of_rows);                                //customised
    var body_with_nodes = new Array(no_of_rows);                          //customised
    var body_with_nodes_static = new Array(no_of_rows);                          //customised
    var cellCounter = 0;

    for (var i = 0, ien = no_of_rows; i < ien; i++) {
        var rows = new Array(no_of_columns);
        var rows_with_nodes = new Array(no_of_columns);

        for (var j = 0; j < no_of_columns; j++) {
            rows[j] = config.format.body(cells[cellCounter], i, j, cellNodes[cellCounter]);
            rows_with_nodes[j] = config.format.body(cellNodes[cellCounter], i, j, cells[cellCounter]).outerHTML;
            cellCounter++;
        }

        body[i] = rows;
        body_data[i] = rows;
        body_with_nodes[i] = $.parseHTML('<tr class="even">' + rows_with_nodes.join("") + '</tr>');
        body_with_nodes_static[i] = $.parseHTML('<tr class="even">' + rows_with_nodes.join("") + '</tr>');
    }

    // only attempt group if even defined grouped_array_index
    if (grouped_array_index.length > 0) {

        // also check to see if the column(s) defined in grouped_array_index are present in the data.  we can grab the first row from row_data_array and check
        var testRow = dt.rows().data()[0];
        var testCheck = true;
        for (var k = 0; k < grouped_array_index.length; k++) {
            if (testRow[grouped_array_index[k]] == null) {
                console.log('Column ' + grouped_array_index[k] + ' does not exist in data, aborting grouping...');
                testCheck = false;
                break;
            }
        }
        if (testCheck == true) {

            /******************************************** GROUP DATA *****************************************************/
            var row_array = dt.rows().nodes();
            var row_data_array = dt.rows().data();
            var iColspan = no_of_columns;
            var sLastGroup = "";
            var inner_html = '',
                grouped_index;
            var individual_group_array = [],
                sub_group_array = [],
                total_group_array = [];
            var no_of_splices = 0;  //to keep track of no of element insertion into the array as index changes after splicing one element

            for (var i = 0, row_length = body_with_nodes.length; i < row_length; i++) {
                sub_group_array[i] = [];
                individual_group_array[i] = [];

                var sGroup = '';

                for (var k = 0; k < grouped_array_index.length; k++) {
                    sGroup = row_data_array[i][grouped_array_index[k]];
                    inner_html = row_data_array[i][grouped_array_index[k]];
                    grouped_index = k;
                    individual_group_array[i][k] = row_data_array[i][grouped_array_index[k]];
                    sub_group_array[i][k] = sGroup;
                }

                total_group_array[i] = sGroup;

                if (sGroup !== sLastGroup) {
                    var table_data = [];
                    var table_data_with_node = '';

                    for (var $column_index = 0; $column_index < iColspan; $column_index++) {
                        if ($column_index === 0) {
                            table_data_with_node += '<td style="border-left:none;border-right:none">' + inner_html + '</td>';
                            table_data[$column_index] = inner_html + " ";
                        }
                        else {
                            table_data_with_node += '<td style="border-left:none;border-right:none"></td>';
                            table_data[$column_index] = '';
                        }
                    }

                    body_with_nodes.splice(i + no_of_splices, 0, $.parseHTML('<tr class="group group_' + grouped_index + ' grouped-array-index_' + grouped_array_index[grouped_index] + '">' + table_data_with_node + '</tr>'));
                    body_data.splice(i + no_of_splices, 0, table_data);
                    no_of_splices++;
                    sLastGroup = sGroup;
                }
            }
        }
    }

    return {
        header: header,
        footer: footer,
        body: body_data
    };
};

This code replaces the _exportData function in dataTables.buttons.js. To use, in your configuration of the table for the button:

    'buttons': [
        {
            extend: 'print',
            exportOptions: {
                grouped_array_index: ['NameOfColumn'] //note the brackets, i think this is so you can group by multiple columns.
            }
        }
    ],

I modified the code so that it checks for the grouped_array_index existing, and also checks to see if the column you supply exists in the data. If any of these fails, it will still print with no grouping, otherwise it will group.

Not the answer you're looking for? Browse other questions tagged or ask your own question.