upgade for existing html table on external page

datatables_text.js

customjsReady('.leaderboard-text', function(element) {
  //alert('leaderboard loaded');
  //add html footer
  $('.character-leaderboard-table').append('<tfoot><tr><td></td><td></td><td></td><td style="text-align: right;padding-right: 15px;"></td><td style="text-align: right;padding-right: 15px;"></td><td style="text-align: right;padding-right: 15px;"></td><td style="text-align: right;padding-right: 5px;"></td><td></td><td></td></tr></tfoot>');
  //fancy styling
  $('.character-leaderboard-table tbody td:nth-child(4)').css({
    'text-align': 'right',
    'padding-right': '15px'
  });
  $('.character-leaderboard-table tbody td:nth-child(5)').css({
    'text-align': 'right',
    'padding-right': '15px'
  });
  $('.character-leaderboard-table tbody td:nth-child(6)').css({
    'text-align': 'right',
    'padding-right': '15px'
  });
  $('.character-leaderboard-table tbody td:nth-child(8)').css({
    'text-align': 'left',
    'padding-left': '15px'
  });
  $('.character-leaderboard-table thead tr th:nth-child(7)').text('# tasks');
  $('.character-leaderboard-table tbody tr:nth-child(1) td:nth-child(9)').css("font-size", "20px");
  $('.character-leaderboard-table tbody tr:nth-child(2) td:nth-child(9)').css("font-size", "19px");
  $('.character-leaderboard-table tbody tr:nth-child(3) td:nth-child(9)').css("font-size", "18px");
  $('.character-leaderboard-table tbody tr:nth-child(4) td:nth-child(9)').css("font-size", "17px");
  $('.character-leaderboard-table tbody tr:nth-child(5) td:nth-child(9)').css("font-size", "16px");
  $('.character-leaderboard-table tbody tr:nth-child(6) td:nth-child(9)').css("font-size", "15px");
  //datatables.net functions
  var tbl = $('.character-leaderboard-table').DataTable({
    dom: '<"top"i>rt<"bottom"flp><"clear">',
    columnDefs: [{
        targets: [7],
        //orderData:-1,
        render: function(data, type, row) {
          //var roi = row[3] - row[4];
          //var number = DataTable.render.number(' ', '.', 2, '').display(roi);
          var cleanText = data.slice(data.indexOf('(') + 1, data.lastIndexOf(')'));
          return cleanText;
        }
      },
      {
        targets: [3, 4, 5],
        render: $.fn.dataTable.render.number(' ', '.', 2, '')
      },
      {
        targets: [2],
        render: function(data, type, row) {
          var cleanLevel = data.slice(0, data.indexOf('('));
          var cleanExp = data.slice(data.indexOf('(') + 1, data.lastIndexOf(')'));
          if (type === 'display') {
            return `<strong style="font-size:18px;">${cleanLevel}</strong> (${cleanExp})`;
          }
          return cleanExp;
        }
      }
    ],
    footerCallback: function(row, data, start, end, display) {
      var numFormatDec = $.fn.dataTable.render.number(' ', '.', 2).display;
      var numFormat = $.fn.dataTable.render.number(' ', '.', 0).display;
      let api = this.api();
      api.column(1).footer().innerHTML = '<strong>Total (page)</strong><br><strong>Total (global)</strong>';
      columns = [6, 3, 4, 5];
      for (var i = 0; i < columns.length; i++) {
        // Total over all pages
        total = api
          .column(columns[i])
          .data()
          .reduce((a, b) => parseFloat(a) + parseFloat(b), 0);

        // Total over this page
        pageTotal = api
          .column(columns[i], {
            page: 'current'
          })
          .data()
          .reduce((a, b) => parseFloat(a) + parseFloat(b), 0);

        // Update footer
        var formatedPageTotal = (columns[i] === 6) ? numFormat(pageTotal) : numFormatDec(pageTotal);
        var formatedTotal = (columns[i] === 6) ? numFormat(total) : numFormatDec(total);
        api.column(columns[i]).footer().innerHTML =
          '<strong style="color:orange;"> ' + formatedPageTotal + '</strong><br><strong style="color:green;">' + formatedTotal + '</strong>';
      }
    }
  });

  tbl.on('draw', function() {
    console.log('Table redrawn');
  });