datatables print not presenting list elements properly

Question

I have a table with cells that contain list elements, the problem is that when I print the table I lose the list elements and the text becomes very hard to read. see the images.

here is my js to create a datatable, you can just focus on the buttons part.

    $(document).ajaxSuccess(function() {
    qxGenerateDataTables();

});

function qxGenerateDataTables() {
    $("table.dataTable:not(table.dataTableProcessed)").each(function() {
        var $this = $(this);
        var paganation = !$this.hasClass("no-pagination");
        var title = $this.attr ("data-file-name");
        var excel= !$this.hasClass("no-excel");
        var table = $this.DataTable({
            "bPaginate": paganation,
            "bSort": true,
            stateSave: true,
            ordering : true,
            searching: true,
            fixedHeader: true,
            columnDefs : [ {
                orderable : false,
                targets : "no-sort"
            } ]
        ,
        dom:'B<"wrapper"iftlp>',
        buttons: [
            {
                extend:    'excelHtml5',
                text:      '<i style="font-size:24px;color:#337ab7" class="fa fa-file-excel-o fa-2x"></i>',
                titleAttr: 'Excel',
                title:  title,
                customize: function( xlsx ) {
                    var sheet = xlsx.xl.worksheets['sheet1.xml'];
                    $('row:first c', sheet).attr( 's', '55' );

                }
            }, 
            {
                extend: 'print',
                text: '<i style="font-size:24px;color:#337ab7" class="fa fa fa-print fa-2x"></i>'
            }
        ]

        });
        table.buttons().container().appendTo( '#qxDatatable_wrapper .col-sm-6:eq(0)' );

        //Surround the table with an outer div, to have the horizontal scroll working properly.
        var wrapperDiv = $("<div>", {style:"overflow:auto; width: 100%;"});
        $this.before(wrapperDiv);
        wrapperDiv.append($this);
        //Mark this table as processed.
        $this.addClass('dataTableProcessed');
        //Just hide the button for now until we find a better way.
        if (!excel){
            $('.fa-file-excel-o').css( 'display', 'none' );
        }

        //Hide the table info if pagination is disabled...
        if (!paganation){
            $('.dataTables_info').css( 'display', 'none' );
        }

    });
}

Your code seems OK. If you can give us a complete working jsfiddle, it will help us understand the possible css conflicts for instance... — PierreN
– PierreN, Commented Dec 31, 2018 at 23:33
@Pierre jsfiddle.net/quakecore/ws40x8oq/5 and I can't show the print button there for some reason can you help? — QuakeCore
– QuakeCore, Commented Dec 31, 2018 at 23:54
is missing the 2 js for the buttons : cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js and the css cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css i suppose — PierreN
– PierreN, Commented Dec 31, 2018 at 23:58

QuakeCore · Accepted Answer · 2019-01-01 12:36:46Z

5

Turns out that all that was needed to be done is to turn off the scriptHtml in the export options. Figured it out after looking at how the script works

Now my export button JS looks like this:

    {
     extend: 'print',
     text: '<i style="font-size:24px;color:#337ab7" class="fa fa fa-print fa-2x"></i>',
     exportOptions: 
      {
            stripHtml: false
      }
    }

answered Jan 1, 2019 at 12:36

QuakeCore

1,9262 gold badges17 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Akbar Noto Over a year ago

Hey, i tried this out, but it doesnt seem work for me :" the print preview doesnt render it , but the real table page works fine

PierreN · Accepted Answer · 2019-01-01 00:48:54Z

2

As Datatable code seems to remove the HTML code when printing, the solution is to remove your html tags (ie <li>) by [li] and [/li]

Then :

you take https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.js and create your own print.js file
instead of displaying <li> and </li>, you display [li] and [/li] ...like this Datatable won't remove this
in your print.js code you change the line str += '<'+tag+' '+classAttr+'>'+dataOut+'</'+tag+'>';

by

dataOut = dataOut.replace("[li]","<li>");

dataOut = dataOut.replace("[/li]","</li>");

str += '<'+tag+' '+classAttr+'>'+dataOut+'</'+tag+'>';

you have finally to add a custom renderer in your cells for replacing [li] and [/li] by <li> and </li>

And it's done ! ;-)

And happy new year (near to 2h AM in France ;-) ) !!

answered Jan 1, 2019 at 0:48

PierreN

9864 silver badges11 bronze badges

2 Comments

QuakeCore Over a year ago

will give it a try tomorrw :)

PierreN Over a year ago

Good night! :-)

Collectives™ on Stack Overflow

datatables print not presenting list elements properly

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related