i need help to print pdf of my datatable with grouping.

i need help to print pdf of my datatable with grouping.

ziovikziovik Posts: 9Questions: 1Answers: 0
edited October 2022 in Free community support

i have already added the _exportData = function ( dt, inOpts ) and my buttons. but it still get pdf without grouping.

my button

 {
        extend: 'collection',
         text: 'Распечатать накладную ' + '<i style="color: green" class="glyphicon glyphicon-print"></i>',
        'buttons': [
           {
                 extend: 'print',
                 exportOptions: {
                    grouped_array_index: [0] //note the brackets, i think this is so you can group by multiple columns.
                }
            }
        ],
     },
}

my table

 var datatable = appCreateSimpleDataTable({
        section: 'cat-awaitingDeliveryFilterInvoice',
        columnSearch: true,
        columns: columns_invoice_order,
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
        fields: form_invoice_order,
        clearbtns: true,
        buttons: buttons_invoice_order,
        rowGroup: {
            dataSrc: 'group'
        },

        dtOptions: {
            select: {
                style:    'os',
                selector: 'td:first-child'
            },
            // "scrollY": "200px",
            "order": [[0, "asc"]],

            dom: 'Brtip',
            "pageLength": 100,
            'searchCols': [
                null,
                null,

            ],
            'columnDefs': [
                // {
                //     "render": (data, type, full) => {
                //     },
                //     "targets": [0]
                // },
                { "name": "posting_number",   "targets": 0 },
            ],
            "processing": true,
            "serverSide": true,
            "paging": true,

            "ajax": {
                "url": "/cat-api-ozon/load_invoice",
                "type": "POST",
                "data" : {shipmentDate:shipmentDate, warehouseId:warehouseId},
                // success: function(response) {
                //     console.log(response)
                // },
                // error: function(response) {
                //     console.log(response)
                // }
            },
            'rowCallback': function(row, data, dataIndex){
                $(row).css("cursor", "pointer");

            },

            "createdRow": function( row, data, index ) {
                if(data.read_status === 0){
                    $('td', row).css('background-color', '#f2e5d0');
                }
            },
            "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>'
                             '<tr class="group" style="height: 2px; background: grey"><td colspan="5"></td></tr>'
                        );

                        last = group;
                    }
                } );

                datatable.columns().eq(0).each( function (index ) {
                    var column = datatable.column( 0 );
                    var data = column.data();

                    for (let i = 0; i < data.length - 1; i++) {
                        if (data[i] === data[i + 1]) {
                            // console.log("We have a match!");
                        }else{
                            // console.log("We dont have a match!");
                        }
                    }
                } );
            }
        },
        beforeModalOpen: function () {
        },
        afterFillForm: function (data) {
        }
    });

but it still gives me pdf without grouping. i have tried all. i need help please

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

Answers

  • allanallan Posts: 63,075Questions: 1Answers: 10,384 Site admin

    grouped_array_index isn't a property I recognise - I'm not sure where that comes from and I don't see it referenced anywhere else in your code?

    I'm afraid that our export options to not currently support the RowGroup extension.

    Allan

  • ziovikziovik Posts: 9Questions: 1Answers: 0
    edited October 2022
    {
            extend: 'collection',
             text: 'Распечатать накладную ' + '<i style="color: green" class="glyphicon glyphicon-print"></i>',
            'buttons': [
               {
                     extend: 'print',
                     exportOptions: {
                        grouped_array_index: [0] //note the brackets, i think this is so you can group by multiple columns.
                    }
                }
            ],
         },
    }
    

    this is the button. where i want group to be in the first column. and the grouped_array_index is also in the function;

    var _exportData = function ( dt, inOpts )
    {
        var config = $.extend( true, {}, {
            rows:           null,
            columns:        '',
            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 );
                }
            },
            customizeData: null
        }, inOpts );
    
        var strip = function ( str ) {
            if ( typeof str !== 'string' ) {
                return str;
            }
    
            // Always remove script tags
            str = str.replace( /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '' );
    
            // Always remove comments
            str = str.replace( /<!\-\-.*?\-\->/g, '' );
    
            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;
    
        // If Select is available on this table, and any rows are selected, limit the export
        // to the selected rows. If no rows are selected, all rows will be exported. Specify
        // a `selected` modifier to control directly.
        var modifier = $.extend( {}, config.modifier );
        if ( dt.select && typeof dt.select.info === 'function' && modifier.selected === undefined ) {
            if ( dt.rows( config.rows, $.extend( { selected: true }, modifier ) ).any() ) {
                $.extend( modifier, { selected: true } )
            }
        }
    
        var rowIndexes = dt.rows( config.rows, modifier ).indexes().toArray();
        var selectedCells = dt.cells( rowIndexes, config.columns );
        var cells = selectedCells
            .render( config.orthogonal )
            .toArray();
        var cellNodes = selectedCells
            .nodes()
            .toArray();
    
        var columns = header.length;
        var rows = columns > 0 ? cells.length / columns : 0;
        var body = [];
        var cellCounter = 0;
    
        for ( var i=0, ien=rows ; i<ien ; i++ ) {
            var row = [ columns ];
    
            for ( var j=0 ; j<columns ; j++ ) {
                row[j] = config.format.body( cells[ cellCounter ], i, j, cellNodes[ cellCounter ] );
                cellCounter++;
            }
    
            body[i] = row;
        }
    
        var grouped_array_index = config.grouped_array_index;
    
        if ( !(grouped_array_index == undefined) ) { //don't run grouping logic if rows aren't grouped
    
            var row_array = dt.rows().nodes();
            var row_data_array = dt.rows().data();
            var iColspan = columns;
            var sLastGroup = "";
            var no_of_splices = 0;
    
            for (var i = 0, row_length = body.length; i < row_length; i++) {
                var sGroup = row_data_array[i][grouped_array_index];
    
                if ( sGroup !== sLastGroup ) {
                    var table_data = [];
    
                    for (var $column_index = 0; $column_index < iColspan; $column_index++) {
                        if ($column_index === 0)
                        {
                            // strips anything inside < > tags. hoping this won't be an issue in the future.
                            table_data[$column_index] = sGroup.replace( /<[^>]*>/gi, '' ); + " ";
                        }
                        else
                        {
                            table_data[$column_index] = '';
                        }
                    }
                    body.splice(i + no_of_splices, 0, table_data);
                    no_of_splices++;
                    sLastGroup = sGroup;
                }
            }
        }
    
        var data = {
            header: header,
            footer: footer,
            body:   body
        };
    
        if ( config.customizeData ) {
            config.customizeData( data );
        }
    
        return data;
    };
    

    which i included in my dataTables.buttons.js.

    the pdf group is not working. please help.

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

  • allanallan Posts: 63,075Questions: 1Answers: 10,384 Site admin

    Did you write the code in there for the row grouping? It isn't written nor supported by us. You'd probably be best asking the original author if it wasn't yourself.

    Allan

  • ziovikziovik Posts: 9Questions: 1Answers: 0

    i am the author. Just tell me please what to do or show me what im doing wrong.

    you mean i should remove this right:
    rowGroup: {
    dataSrc: 'group'
    },
    and what else im doing wrong.

  • ziovikziovik Posts: 9Questions: 1Answers: 0

    if you are talking about the function of _exportData. i copied it from one of your link. if its wrong please tell me the right one and where and how to use it

  • kthorngrenkthorngren Posts: 21,117Questions: 26Answers: 4,916
    edited October 2022

    I added lines 108-140 to the dataTables.buttons.js file in this example:
    http://live.datatables.net/bakokiva/1/edit

    The code works for Print, PDF and Excel.

    the pdf group is not working. please help.

    Please describe exactly what happens and what is not working.

    Make sure you aren't also loading the unmodified dataTables.buttons.js. You only want to load this once. Maybe you need to clear the browser's cache to load the modified file. Make sure you are loading the files in the proper order.

    If you still need help then please provide a link to your page or a test case replicating the issue so we can help debug.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • ziovikziovik Posts: 9Questions: 1Answers: 0

    https://datatables.net/forums/uploads/editor/5i/h6bgblhjc5b6.docx

    i want something like this . not the way you group.

  • kthorngrenkthorngren Posts: 21,117Questions: 26Answers: 4,916
    edited October 2022

    Sorry, I'm not sure what that screenshot is showing. It looks like a standard table to me. Is it grouped somehow?

    not the way you group.

    Are you not using the rowGroup extension?

    Please provide details of exactly what you are looking for.

    Kevin

  • ziovikziovik Posts: 9Questions: 1Answers: 0

    http://live.datatables.net/fecoqote/2/

    this test lick. i want it to group like that but where the Ashton Cox for example shows twice it should merge that coloumn together only so the Ashton Cox shows once but other details should show. just to merge that two cells and show one of the Ashton Cox and leaves its other cells and row

  • ziovikziovik Posts: 9Questions: 1Answers: 0
    edited October 2022

    https://datatables.net/forums/uploads/editor/zu/dvvv5myo7y5v.docx

    please look at the first column and see the merged cells when the value are thesame

  • kthorngrenkthorngren Posts: 21,117Questions: 26Answers: 4,916

    There is a third party plugin called rowsGroup that I think will group the rows the way you want. Note that this is a third party plugin and in not supported by Datatables. Any issue with it will need to go through the developer of the plugin. Also note that this plugin creates rowspan in the tbody which is not supported by Datatables. See the HTML requirements for details.

    You can see an example from the fiddle in the first post in this thread.

    Export functionality may or may not work with this plugin.

    Kevin

  • ziovikziovik Posts: 9Questions: 1Answers: 0

    ok lets try just merging cells. so how can i loop through a specific column and find if the values are thesame then merge cells?

  • kthorngrenkthorngren Posts: 21,117Questions: 26Answers: 4,916

    To merge them you will need to create a rowspan in the table rows which is not supported by Datatables. The easiest way to do this is to use the third party rowsspan plugin as the code already does this. However you probably could add some code to the drawCallback function (I guess the second loop you have) to remove the duplicate td elements from the DOM and add the appropriate rowspan to the first td via jQuery.

    Either of these options probably won't be exported correctly so custom coding for the export buttons will need to happen if you want these custom groups exported.

    Your best option is to use the Datatables RowGroup extension with the export solution posted above.

    Kevin

  • kthorngrenkthorngren Posts: 21,117Questions: 26Answers: 4,916
    edited October 2022

    I updated your test case to add the rowspan to merge duplicate cells.
    http://live.datatables.net/kozuwugu/1/edit

    This is for the table display only. It won't apply to the export.

    Since this adds a non-supported rowspan within the Datatables rows it may break some Datatables functionality. You will need to test this in your solution to make sure everything works as expected. If something is not working then this solution may not work for you and you will need to find something else.

    Kevin

Sign In or Register to comment.