CODEWITHSUNDEEP
javascriptcssprintingdatatablesalignment
fly123
fly123

Reputation: 23

How do I change the print alignment for individual columns in DataTables?

I was able to use the customize function (given below) to modify the alignment in print layout, but unfortunately this applies to the whole table and all its columns.

How do I change the print alignment of individual columns (that I set and choose)?

My current code:

customize: function (win){ $(win.document.body).find('table').css('text-align', 'right'); },

Jsfiddle:

https://jsfiddle.net/6724x3LL/

Upvotes: 0

Views: 1830

Answers (1)

fly123
fly123

Reputation: 23

First I tried this and it did not seem to work:

Js

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

CSS

.dataTable tbody td.col_1 {
  text-align: right;}
.dataTable tbody td.col_2 {
  text-align: center;}
.dataTable tbody td.col_3 {
  text-align: left;}

Setting classes for the columns in JavaScript using columnDefs, and then subsequently styling those classes in CSS only affected the html table render itself, the CSS was not carried over to the print layout.

However I was able to find a solution to this.

By using this script code within the customize option of print:

customize: function (win){
$(win.document.body).find('table tbody td:nth-child(1)').css('text-align', 'right');

Where each column would be set with the nth child.

Or alternatively use this pure CSS method:

.dataTable tbody tr td:nth-child(1)  {
  text-align: right;}
.dataTable tbody tr td:nth-child(2)  {
  text-align: center; }
.dataTable tbody tr td:nth-child(3)  {
  text-align: left; }

Upvotes: 2

Related Questions