Is it possible to use colvis with print in a way that will preserve the styling?

Is it possible to use colvis with print in a way that will preserve the styling?

hm123hm123 Posts: 84Questions: 27Answers: 1
edited November 2017 in Free community support

Using the columnDefs option, I am able to assign classNames, then I am able to style the table using CSS, and the result shows up as expected to the viewer, but isn't carried on towards print.

"columnDefs": [ 
   { className: "col_1", "targets": [0] },
   { className: "col_2", "targets": [1] },
   { className: "col_3", "targets": [2] }],

https://jsfiddle.net/nq7n5kto/

I also tried assigning classNames to the columns option instead, but no change in results. Here the print button also gives an output that is stripped of styling as well:

var columns = [
   {"data": "company", "title":   "Company", "className": "col_1"},
   {"data": "violations","title":    "Claims", "className": "col_2"},
   {"data": "total-award","title": "Total Awarded","className": "col_3"} ];

https://jsfiddle.net/2e1zmhm7/

I was however, able to carry forward the styling using the nth child selector:

.dataTable tbody td:nth-child(1) {
    text-align: left; 
    direction: ltr;
    text-decoration: underline;}
.dataTable tbody td:nth-child(2) {
    text-align: center;
    color: blue;
    font-weight: bold;}
.dataTable tbody td:nth-child(3) {
    text-align: right;
    direction: ltr;
    color: red;
    font-style: italic;
    text-decoration: overline}

But the problem however, is that this method muddles up the styling if I use the column visibility control 'colvis' to hide a column before the print. The nth child changes and so does the styling.

https://jsfiddle.net/akhvon60/

Is there a way to use colvis with print in a way that will preserve the styling?

This discussion has been closed.