CODEWITHSUNDEEP
javascriptjquerydatatables
brainmassage
brainmassage

Reputation: 1254

How can I change the font size of a row dynamically with datatables?

I checked datatables api but couldn't see anything under row() functions. Basically I want to achieve this kind of functionality:

var myTable = $('#example').DataTable();
myTable.row(i).fontSize = dynamicValue;

Or

myTable.row(i).css('font-size', dynamicValue);

Upvotes: 2

Views: 12166

Answers (1)

davidkonrad
davidkonrad

Reputation: 85538

If you want a persistent solution you have to go through the API. If you have a dataTable instance :

var table = $('#example').DataTable()

and a CSS class :

.larger-font {
  font-size: 120%;
}

then you can permanently change the font-size of a clicked row by :

$('#example').on('click', 'tr', function() {
  table.row(this).nodes().to$().addClass('larger-font')
})

row(this) gives you the internal row instance
nodes() gives you the entire <tr> DOM node
to$() return that DOM node as jQuery instance
addClass() adds the CSS

demo -> http://jsfiddle.net/tgefobbq/

If you want to manipulate inline CSS instead of injecting classes you just do this the same way :

table.row(this).nodes().to$().css('font-size', '120%')

to$() is not necessary, just convenient - you can target the "raw" DOM as well :

table.row(this).nodes()[0].style.cssText = 'font-size:120%;

But either way, it is important you retrieve the DOM nodes through the API, not through jQuery or any other way.

Upvotes: 4

Related Questions