CODEWITHSUNDEEP
javascriptjqueryhtmlcssdatatables
Space Peasant
Space Peasant

Reputation: 287

Keep CSS of certain column in DataTable for print

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?

Upvotes: 2

Views: 2429

Answers (1)

Shiffty
Shiffty

Reputation: 2156

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/

Upvotes: 4

Related Questions