https://epay.sau.edu/C21430_tsa/web/js/datatables-fixes.js

1$( document ).ready( function ()
2{
3  /**
4   * Issue: Tables have Responsive extension enabled with responsive option. Tables are located under BS tabs. Columns
5   * that do not fit the container of the table in “Tab 1” are hidden. However table in “Tab 2” has all columns visible,
6   * even those that do not fit the container.
7   *
8   * Solution: the code below to recalculate column widths of all visible tables once a tab becomes active by using a
9   * combination of columns.adjust() and responsive.recalc() API methods.
10   */
11  function recalcDataTable()
12  {
13    $( $.fn.dataTable.tables( true ) ).DataTable()
14        .columns.adjust()
15        .responsive.recalc();
16  }
17
18  $( 'a[data-toggle="tab"]' ).on( 'shown.bs.tab', function ()
19  {
20    recalcDataTable();
21  } );
22
23  $(".collapse").on('shown.bs.collapse', function() {
24    recalcDataTable();
25  });
26
27  var spanSorting = '<span class="arrow-hack"></span>';
28  $( function ()
29  {
30    $( ".dataTable thead th" ).each( function ( i, th )
31    {
32      $( th ).html( $( th ).html() + spanSorting );
33    } );
34  } );
35} );