CODEWITHSUNDEEP
javascriptjquerycssdatatables
KPK
KPK

Reputation: 442

Adjust nth-child properties when hiding a column

We're using jQuery DataTables to display some table data. We're also using the "Show / hide columns" option dynamically (https://datatables.net/examples/api/show_hide.html)

The issue is we're using CSS nth-child logic to align/format some columns, but when we hide a column with jQuery, all the nth-child logic is now off by the column that was hidden.

Please see this jsFiddle for demonstration of the problem.

Is there a way to adjust all nth-child css values?

Upvotes: 0

Views: 239

Answers (1)

Gyrocode.com
Gyrocode.com

Reputation: 58930

SOLUTION

Avoid using nth-child in this case. Instead assign class names to the columns with columns.className and target specific columns using class names instead.

JavaScript

var table = $('#example').DataTable( {
    "columnDefs": [{
        "targets": 3,
        "className": "col-age"
    }]
} );

CSS

#example td.col-age {
  text-align:right;
}

DEMO

See updated jsFiddle for code and demonstration.

Upvotes: 3

Related Questions