jQuery Datatables responsive example

HTML

<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.1/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.1/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/responsive/1.0.0/css/dataTables.responsive.css">
<script src="//cdn.datatables.net/responsive/1.0.0/js/dataTables.responsive.js"></script>
    <div id="hideButton" style="width: 100%; margin-bottom: 15px; margin-top: 0px;">
      <button type="button" class="btn btn-default btnSelector  button-margin-right-15 multidownload" id="btnSelector" data-placement="auto" data-delay=1000 title="">
        <span id="showColumn">Hide</span>
      </button>
    </div>
    <table id="example" class="display" cellspacing="0" width="100%">
      <thead>
        <tr>
          <th> </th>
          <th>Status</th>
          <th>Name</th>
          <th class="jsFiletype">Type</th>
          <th class="jsFilesize">Size</th>
          <th class="jsDatetime">Date</th>
          <th> </th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td><input type="checkbox" value="1" name="Document" class="form-check-input"></td>
          <td><span>T</span></td>
          <td><a>25.jpg</a></td>
          <td><a>jpg</a></td>
          <td><a>551.2 KB</a></td>
          <td>22.03.2021 13:20:20</td>
          <td><span>T</span></td>
        </tr>
        <tr>
          <td><input type="checkbox" value="1" name="Document" class="form-check-input"></td>
          <td>&nbsp;</td>
          <td><a>22.jpg</a></td>
          <td><a>jpg</a></td>

          <td><a>8.2 bytes</a></td>
          <td>22.04.2021 13:20:20</td>
          <td><span>T</span></td>
        </tr>
        <tr>
          <td><input type="checkbox" value="1" name="Document"...

JavaScript

$("#btnSelector").click(function() {
  if (this.ToogleDownloadRow === true) {
    //$('td:nth-child(1),th:nth-child(1)').show();
    $('#example').DataTable().column(0).visible(true);
    $("#showColumn").text("Hide");
    this.ToogleDownloadRow = false;
  } else {
    $('#example').DataTable().column(0).visible(false);
    //$('td:nth-child(1),th:nth-child(1)').hide();
    this.ToogleDownloadRow = true;
    
    $("#showColumn").text("Show");
  }
});

function dateFormatter(arg, ascending) {
  var x = String(arg).replace(/(?!^-)[^0-9]/g, "-");
  x = x.split('-');
  if (x.length < 6) return ascending ? Infinity : -Infinity;

  return parseInt(x[2] + x[1] + x[0] + x[3] + x[4] + x[5]);
}

function fileSizeFormatter(arg, ascending) {
  var value = 0.0;
  var x = "";
  $("<div></div>").html(arg).find("a").each(function(l) {
    x = $(this).text();
  });
  x = x.split(' ');

  if (x.length < 2) return ascending ? Infinity : -Infinity;

  switch (x[1]) {
    case "bytes":
      value = parseFloat(x[0]) * 1;
      break;
    case "KB":
      value = parseFloat(x[0]) * 1000;
      break;
    case "MB":
      value = parseFloat(x[0]) * 1000 * 1000;
      break;
    default:
      value = 0.0;
      break;
  }

  return value;
}

function fileTypeFormatter(arg, ascending) {
  var x = "";
  $("<div></div>").html(arg).find("span").each(function(l) {
    x = $(this).attr('class');
  });
  x = x.split(' ');
  if (x.length < 2) return ascending ? Infinity : -Infinity;

  return x[1];
}

$(document).ready(function() {
  jQuery.extend(jQuery.fn.dataTableExt.oSort, {
    "de_datetime-asc": function(a, b) {
      a = dateFormatter(a, true);
      b = dateFormatter(b, true);
      return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    },
    'de_datetime-desc': function(a, b) {
      a = dateFormatter(a, false);
      b = dateFormatter(b, false);
      return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    },
    'de_filesize-asc': function(a, b) {
      a = fileSizeFormatter(a, true);
      b =...