Replies

• kthorngren Posts: 22,305Questions: 26Answers: 5,127

  July 13 edited July 13

  The selector $('maintable.dataTable td') is incorrect. maintable is a Javascript variable which won't work as part of the jQuery selector. Your table has this id="Adresses" assigned as the ID. So something like this will be more appropriate:

  $('#Adresses').css('font-size', newSize); // Apply the new font size
  $('#Adresses td').css('font-size', newSize); // Apply the new font size to the cells
  

  However this will only apply to the td on the current page displayed as these are the only rows in the document. Use cells().nodes() with to$() to get a jQuery object of all the Datatable cells. Then apply the CSS. Replace the second line with something like this:

  maintable.cells().nodes().to$().css('font-size', newSize);
  

  EDIT: Changed the #maintable to #Adresses to correct the code for the provided test case.

  Kevin
• crcucb Posts: 104Questions: 35Answers: 0

  July 13

  thank you . this works except for the headers, they seem unaffected.
• kthorngren Posts: 22,305Questions: 26Answers: 5,127

  July 13 edited July 13

  Maybe you need to add something like this:

  $('#Adresses th').css('font-size', newSize);
  

  The headers aren't returned as part of cells().nodes(). This returns only the cells in the tbody.

  Also note above I forgot to change the maintable to be #Adresses. I edited the code for correctness.

  Kevin
• kthorngren Posts: 22,305Questions: 26Answers: 5,127

  July 13 edited July 13

  I see the issue. You have scrolling features enabled. In this case Datatables creates a duplicate table with the header and footer and hides the original to facilitate scrolling. The above selectors won't find the duplicated table. You can inspect the table to see this.

  Use this:

  $('table.dataTable thead th').css('font-size', newSize);
  

  Or to specify a specific Datatable use the original table's ID, Adresses for example, and select the div Datatables creates with this selector div#Adresses_wrapper. Then find the table below the div which has the duplicated header, like this:

  $('div#Adresses_wrapper table.dataTable thead th').css('font-size', newSize);
  

  Kevin
• allan Posts: 65,277Questions: 1Answers: 10,821 Site admin

  July 13

  If you want to adjust the size of all text in the table, you might be best just adding a class or style to the table element itself. That would be more efficient in terms of processing. It might need an !important depending on the other styles on the page.

  Allan
• crcucb Posts: 104Questions: 35Answers: 0

  July 13

  Thank you Allen,
  I added a class to the table tag:

  <

  table cellpadding="0" cellspacing="0" border="0" class="display" id="Adresses" width="100%" class="dt-resizeable">

  At runtime, I am trying to reference the table and it's not finding it:
  const myElement = document.getElementById('dt-resizeable');

  In web developer tools, I notice the class that I specified is not present:

  <

  table cellpadding="0" cellspacing="0" border="0" class="display dataTable dtfc-has-start dtfc-has-left dtfc-scrolling-end dtfc-scrolling-right" id="Adresses" width="100%" aria-describedby="Adresses_info" style="position: absolute; top: 0px; left: 0px; width: 100%;">
• allan Posts: 65,277Questions: 1Answers: 10,821 Site admin

  July 13

  id="Adresses"

  But

  document.getElementById('dt-resizeable');

  I see a little problem there .

  You either want to change the selector to Adresses or use document.getElementsByClassName.

  Allan
• crcucb Posts: 104Questions: 35Answers: 0

  July 13

  Sorry about that, I corrected that to the following but the header text still doesn't change, the datatable values do change:
  var newSize = this.value+ 'em';
  var myElement = document.getElementById('Addresses');
  myElement.style.fontSize = newSize;

  Thank you
• kthorngren Posts: 22,305Questions: 26Answers: 5,127

  July 13 edited July 13

  As I said you have scrolling features enabled so you need to use a selector that finds the duplicated table which has the header and footer. Looks like your test case is down. Go to this example and past this into the console:

  $('table.dataTable').css('font-size', '0.5em');
  

  If you want to be more specific with the table that is adjusted, ie if you have more than one table on the page, then use this:

  $('div#example_wrapper table.dataTable').css('font-size', '1.5em');
  

  Paste it into the console of the same example.

  For your test case change #example_wrapper to #Adresses_wrapper.

  Kevin
• crcucb Posts: 104Questions: 35Answers: 0

  July 14

  thank you, I finally understand and got it.