DataTables Details/Footer Test Case

by esprocon

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/bs5/jszip-2.5.0/dt-1.11.4/b-2.2.3/b-colvis-2.2.3/b-html5-2.2.3/b-print-2.2.3/fh-3.2.4/r-2.3.0/rg-1.2.0/sp-2.0.2/sl-1.4.0/datatables.min.css">
<script src="https://cdn.datatables.net/v/bs5/jszip-2.5.0/dt-1.12.1/b-2.2.3/b-colvis-2.2.3/b-html5-2.2.3/b-print-2.2.3/fh-3.2.4/r-2.3.0/rg-1.2.0/sp-2.0.2/sl-1.4.0/datatables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.4/underscore-min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<div class="row">
  <div class="col mx-3 p-2">
    <table class="table table-hover table-striped table-dark dt-responsive  align-middle" style="width:100%" id="mtl_elig_crit_det_19" data-dt-init-conf-key="mtl-elig-crit-det-table">
      <thead class="border-bottom-0">
        <tr>
          <th>Target ID</th>
          <th>Determination ID</th>
          <th>Criteria ID</th>
          <th>Details</th>
          <th>Name</th>
          <th>Determination</th>
          <th>Reason</th>
          <th>As Of</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>257</td>
          <td>19</td>
          <td data-post-phpfunction="mtl_ajax_crit_det_details" data-ajaxaction="" data-ajaxdone="updateCritDetDetails" data-ajaxvalidate="needCritDetDetailData" data-post-mtl_crit_id="19" data-post-mtl_crit_type="A" data-post-mtl_det_id="257" data-post-mtl_det_val="36" data-post-mtl_det_dt="2022-07-15 13:14:59" data-post-mtl_target_id="1" data-post-mtl_row_idx="0"></td>
          <td>Jacob Van Laan</td>
          <td>
            <span...

CSS

th, td {
    text-align: center;
}

.btn:not(.bs-btn).btn-primary {
  color: #fff !important;
  background-color: #005ce0 !important;
}

.btn:not(.bs-btn).btn-primary:hover {
  background: linear-gradient(#0069ff, #005ce0) !important;
}

.btn:not(.bs-btn) {
  display: inline-block !important;
  cursor: pointer !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  color: #fff !important;
  font-size: 1.19rem;
  padding: 12px 24px;
  border: none !important;
  outline: none !important;
  transition: none !important;
}

.btn-sm {
  padding: 0.375rem 0.75rem !important;
  font-size: 1rem !important;
}

.text-nowrap {
  white-space: nowrap !important;
}

.success-letters[data-letters]:before,
.P-letters[data-letters]:before {
  background: #198754;
}

.sm-letters[data-letters]:before {
  width: 1.75em;
  height: 1.75em;
  line-height: 1.75em;
  margin-right: 0.75em;
  font-size: 0.9em;
  padding: 1px;
}

[data-letters]:before {
  content: attr(data-letters);
  display: inline-block;
  font-size: 1em;
  width: 2em;
  height: 2em;
  line-height: 2em;
  text-align: center;
  border-radius: 50%;
  vertical-align: middle;
  background: var(--mtl-primary-color);
  margin-right: 1em;
  color: white;
  font-weight: 600;
}

JavaScript

function cleanTableFeatures(settings, table) {
  var api = new $.fn.dataTable.Api(settings);
  var features = $(table)
    .closest('.dataTables_wrapper')
    .find('.dataTables_paginate, .dataTables_length, .dataTables_filter');
  features.toggle(api.page.info().pages > 1);
}

function format(d) {
  // `d` is the original data object for the row
  return (
    '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
    '<tr>' +
    '<td>This is just a fiddle test case, no prod data here.</td>' +
    '</tr>' +
    '</table>'
  );
}

var globalInitOptions = {
  initComplete: function(settings) {
    cleanTableFeatures(settings, this);
  },
  infoCallback: function(settings, start, end, max, total, pre) {
    var info = this.api().page.info();
    var footer = info.pages > 1 ? pre : "";
    if (info.recordsTotal && this.data('dtFooterKey')) {
      footer += this.data('dtFooterKey');
    }
    return footer;
  },
  responsive: {
    details: {
      renderer: function(api, rowIdx, columns) {
        console.log(api);
        var maxWidth = jQuery('.tab-content').width() * .85;
        var data = $.map(columns, function(col, i) {
          return col.hidden ?
            `<li style="max-width: ${maxWidth}px" data-dtr-index="${col.columnIndex}" data-dt-row="${+col.rowIndex}"  data-dt-column="${col.columnIndex}">
									<div class="dtr-title mtl-primary-color">${col.title}</div>
									<div class="dtr-data">${col.data}</div>
								</li>` :
            '';
        }).join('');

        return data ?
          $('<ul class="dtr-details"/>').append(data) :
          false;
      }
    }
  }
}

var initOptions = {
  'mtl-elig-crit-det-table': {
    "autoWidth": false,
    columns: [{
        name: 'target_id',
        visible: false
      },
      {
        name: 'det_id',
        visible: false
      },
      {
        name: 'criteria_id',
        visible: false
      },
      {
        name: 'details',
        responsivePriority: 1,
     ...