Answers

• kthorngren Posts: 22,457Questions: 26Answers: 5,166

  April 3

  Looks like you are loading Bootstrap 3 but using the Datatables default styling includes.

  jQuery 3.7.0, DataTables 2.2.2, Buttons 3.2.2, HTML5 export 3.2.2, Print view 3.2.2, FixedColumns 5.0.4, FixedHeader 4.0.1

  Use the Download Builder to get the proper Datatables BS3 style integration files. See the Styling docs for more details.

  Also note that you are loading jquery.js three times; once at line 37, then line 39 and in the concatenated Datatables .js and .css. jQuery should only be loaded once otherwise you may have operational issues with the .js compenents attaching to different jquery.js instances.

  Try thse changes and let us know the results.

  Kevin
• allan Posts: 65,710Questions: 1Answers: 10,928 Site admin

  April 3 Answer ✓

  It took me quite a while to figure out why I couldn't see a scroll bar on the page for the horizontal scroll. You have height: 772px; on the first div element in the page, chopping off the bottom of the page for me.

  You also have this on the table that I would very strongly suggest you remove:

       style="position: relative;
                   top:      0px;
                 width:     100%;
                height:      99%;
               display:    block;
          table-layout:     auto; "
  

  display: block for the table is not supported by DataTables.

  Furthermore your HTML isn't valid HTML in that the colspan's don't line up. The first header row is two cells of 4 and 63 colspan, while the second header row is 4 and 62. Third header row appears to be 66 cells, while the table body rows have 67.

  Correct those points and hopefully it should work.

  Allan
• pakaymc Posts: 6Questions: 2Answers: 0

  April 3

  Thank you Allen, removing the Style="" from the table corrected the problem.

  Your comments are vry helpful.
  Thank you.
  Michael
• pakaymc Posts: 6Questions: 2Answers: 0

  April 3

  Thank you for all the help. I made a lot of changes and all is working as expected.
• allan Posts: 65,710Questions: 1Answers: 10,928 Site admin

  April 3

  Good stuff - thanks for letting me know.

  Allan
• kthorngren Posts: 22,457Questions: 26Answers: 5,166

  April 4 edited April 4

  I looked at your test case again and you are still loading jqiery.js twice.

  This is line 38:

  <script src="https://code.jquery.com/jquery-3.5.1.js"                             ></script>
  

  And you are loading it in this concatenated datatables.js on line 52:

  <script src="https://cdn.datatables.net/v/bs-3.3.7/jq-3.7.0/dt-2.3.7/b-3.2.6/b-html5-3.2.6/b-print-3.2.6/fc-5.0.5/fh-4.0.6/datatables.min.js" integrity="sha384-TqUfIDW5OacMoFzF0fAvaXzthvQd4lapud0Nut5JiGggl8B+zbKw+yhshuP4RqIi" crossorigin="anonymous"></script>
  

  Note the jq-3.7.0 in the CDN url for jquery.js.

  You should only load it once. I would recommend removing line 38. You may need to reorder the .js load order by moving line 52 up above all the other .js files if they require jquery to be loaded on initialization.

  Also in line 49 you are using the old datatables.css for version 2.2.2:

  <link  href="https://cdn.datatables.net/v/dt/jq-3.7.0/dt-2.2.2/b-3.2.2/b-html5-3.2.2/b-print-3.2.2/fc-5.0.4/fh-4.0.1/datatables.min.css" rel="stylesheet" integrity="sha384-ogewkNX99342naCiAzlYXWImQW/LF2G6AFFnAItdt+X6N08cSaBmsKkfp6Hrx2sB" crossorigin="anonymous" />
  

  It doesn't include the BS3 style integration. You should update this statement with the one you generated using the download builder in line 52.

  You can open the datatables.min.css and datatables.min.js to see what is included.

  Kevin