Change column title font size at runtime.

classic12

I need to change this on a resize event within the app. (So I can have a smaller font on phones ).

I have the onresize event

Is it possible without calling the ajax again ?

Cheers

Steve Warby

classic12

Sorry it's not the title I need to change.

I have:

 columns: [
                      {
                          data: "anims",
                          // title : ' <img style="vertical-align: middle" src = "http://mydubaidream.com/imageAssets/swirl.png"  >'+  '<font size= "25">' + ' <b>Title</b>  ',
                          
                          render: function(data, type, row)
              {
                   //return '<img src = "http://mydubaidream.com/imageAssets/swirl.png" > ' + '<font size="40">' + data.title  +data.url ;
                   return '<img style="vertical-align: middle " src = "http://mydubaidream.com/imageAssets/swirl.png" > ' + '<font size= "25">'  +data.title  +data.url ;
              }
                      }
                        
              
              ]

So its the font size that is shown in the return.

allan

Personally I would suggest that you add a class to the images and then use some responsive CSS rather than re-rendering the table. But if you did want to do that, call rows().invalidate() to have DataTables re-read the data source and draw the table again.

Allan

Tester2017

If you only need to change the font size, you can use something like this:

    $("table.dataTable").css("font-size", newSize);
    table.columns.adjust().draw();

Where [newSize] is the new font size. And the columns.adjust().draw() will calculate the new width of the columns.

I am using this with Bootstrap 3, responsive layout and column widths defined in "em". The smaller the font becomes, more columns will be visible and the opposite. No need to reload data, only adjusting the layout.

But as you are using a render function why not using a var, indicating the kind of device, like "mobile", "tablet", "desktop" etc.. And then apply the font size conditionally?
'<font size="' + (device === mobile ? '25' : '40') + '">'