Change column title font size at runtime.

Change column title font size at runtime.

classic12classic12 Posts: 228Questions: 60Answers: 4

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

Answers

  • classic12classic12 Posts: 228Questions: 60Answers: 4

    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.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • Tester2017Tester2017 Posts: 145Questions: 23Answers: 17
    edited April 2018

    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') + '">'

This discussion has been closed.