Keep CSS of certain column in DataTable for print

Question

I'am using DataTables with print plugin and in one column I have some kind of shema which looks good on desktop but when I print it CSS is removed.

My JS looks like this

$('table').DataTable({
  dom: 'Bfrtip',
  buttons: [{
      extend: 'print',
      customize: function(win) {
        $(win.document.body)
          .css('font-size', '10pt');

        $(win.document.body).find('table')
          .addClass('compact')
          .css('font-size', 'inherit');
      },
      exportOptions: {
        columns: ':visible'
      }
    },
    'colvis'
  ]
});

Full example is here https://jsfiddle.net/eza27o58/

Shema is in User column under users name.

Is there a way to keep CSS of that column for print so that whole shema is visible?

Shiffty · Accepted Answer · 2016-09-06 05:39:31Z

4

Set stripHtml to false in the exportOptions. The CSS was not removed, it's the div- and strong-tags that were removed.

$('table').DataTable({
  dom: 'Bfrtip',
  buttons: [{
      extend: 'print',
      customize: function(win) {
        $(win.document.body)
          .css('font-size', '10pt');

        $(win.document.body).find('table')
          .addClass('compact')
          .css('font-size', 'inherit');
      },
      exportOptions: {
        columns: ':visible',
        stripHtml: false
      }
    }
  ]
});

Fork of your example: https://jsfiddle.net/snxb9ay0/

answered Sep 6, 2016 at 5:39

Shiffty

2,1662 gold badges27 silver badges33 bronze badges

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

Collectives™ on Stack Overflow

Keep CSS of certain column in DataTable for print

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related