Need DataTable Printing To Only Print Text

Question

I have an existing module that shows data inside a table (using DataTables (jQuery)) and the end user has asked for them to be able to print the data.

    $('.js-dataTable-full-agedDebt').DataTable({
            ajax: {
               url: 'inc/ajax/tables/payable/aged-debt.php',
               type: "post",
               data: function(d){
                   d.depot = Depot;
                   d.group = Group;
               }
            },
            dom: 'Bfrtip',
            pagingType: "full_numbers",
            buttons: [
                'print'
            ],
            order: [1., 'asc'],
            "deferRender": true,
            scrollY: "500px",
            paging: false,
            columns: [
                {"data": "Account"},
                {"data": "Term"},
                {"data": "Credit"},
                {"data": "Total"},
                {"data": "Amount"},
                {"data": "Month1"},
                {"data": "Month2"},
                {"data": "Month3"},
                {"data": "Month4"},
                {"data": "Month5"},
                {"data": "Action"},
                {"data": "balanceMonthRemit"},
                {"data": "balanceMonth"},
                {"data": "balanceMonthMinusOne"},
                {"data": "balanceMonthMinusTwo"},
                {"data": "balanceMonthMinusThree"},
                {"data": "balanceOlder"},
            ],
            "columnDefs": [
                {"visible": false, "targets": [11, 12, 13, 14, 15, 16]},
                {"orderData": [ 11 ], "targets": 4 },
                {"orderData": [ 12 ], "targets": 5 },
                {"orderData": [ 13 ], "targets": 6 },
                {"orderData": [ 14 ], "targets": 7 },
                {"orderData": [ 15 ], "targets": 8 },
                {"orderData": [ 16 ], "targets": 9 },
            ]
}

This is fine in normal circumstances, however, this table doesn't have default values. The values in 90% of the cells are anchor tags with a popOver (which shows a smaller datatable showing the calculation).


                        722.21

This results in the below

I need these fields to show only the innerHTML/value so when I click print, it doesnt show up like this:

user_16050562 · Answer

For those who have been watching the thread, I have learnt about the glorious Export Options for DataTables.

 buttons: [{extend: 'print',
            exportOptions: {
                columns: [ ':visible' ],
                format: {
                    body: function ( data, row, column, node ) {
                        if (column == 3) {
                            console.log($(data).text());
                            return column == 3 ?
     
                            $(data).text():
                            data;
                        } else if (column == 4) {
                            return column == 4 ?
     
                            $(data).text():
                            data;
                        
                        } else if (column == 5) {
                            return column == 5 ?
     
                            $(data).text():
                            data;
                        
                        } else if (column == 6) {
                            return column == 6 ?
     
                            $(data).text():
                            data;
                        
                        } else if (column == 7) {
                            return column == 7 ?
     
                            $(data).text():
                            data;
                        
                        } else if (column == 8) {
                            return column == 8 ?
     
                            $(data).text():
                            data;
                        
                        } else if (column == 9) {
                            return column == 9 ?
     
                            $(data).text():
                            data;
                        
                        } else {
                            return data;
                        }
                    }
                }
            },
        }],

I was able to get just the text of the columns that had the text embedded into the HTML. I could've used a loop but this is a workaround patch for the project so I'm sure someone else can give a better structured answer

Need DataTable Printing To Only Print Text

1 Answers