Responsive not working and I'm out of ideas

Fredtholomew

Link to test case: http://clientes.warma.pe/agendosalud/admin/appointments/ (user/password: test/test)
Debugger code (debug.datatables.net): I get this error when trying to upload it: Uncaught TypeError: table.oInstance.fnGetData is not a function
Error messages shown: No error messages when loading or using the table, everything else seems to work without issues.
Description of problem:

I've tried using both the data-priority attributes and the columnDef options, but I still can't get the Responsive to work.

I have updated to the latest version of DataTables both with CDN and local, also minimized and not, and with the CDN I tried with compiled and without.

I have also tried the following:

Adding this code: .DataTable().columns.adjust().responsive.recalc();
Adding table-layout: fixed; to the body of the page.

I've run out of ideas, I'm not really sure what could be causing this to not work. The only thing I could think of is that the parent container has display: flex; but that seems like a stretch.

The data is being pulled from an Ajax.

Any and all help will be greatly appreciated it!!!

Fredtholomew

The js code (maybe a bit extra convoluted, it's because we're in the process of building a CMS):

var columnKeys = [];
var i = 0;
var classesArray = JSON.parse('["title","medium","medium","medium","medium","medium","medium","buttons"]');
for(i=0; i<classesArray.length; i++){
  console.log(classesArray[i]);
  if(classesArray[i]=='buttons'){
    columnKeys.push({"class": classesArray[i], "bSortable": false});
  }else{
    columnKeys.push({"class": classesArray[i]});
  }
}

var dataTable = $('#appointments').DataTable({
  "responsive": true,
  "processing": true,
  "serverSide": true,
  "pageLength": 5,
  "lengthMenu": [ 5, 10, 25, 50, 75, 100 ],
  order: [['2', 'DESC']],
  "ajax": {
    url: "core/ajax/table.php",
    "data": function ( d ) {
      return $.extend( {}, d, {
        table_id: 'appointments',
        table: '[{"table":"appointments","columns":[{"column":"","nickname":""}]},{"table":"staff","join":{"side":"LEFT","this":"ID","that":"Staff_ID"},"columns":[{"column":"Names","nickname":"Staff_names"},{"column":"Lastnames","nickname":"Staff_lastnames"}]},{"table":"patients","join":{"side":"LEFT","this":"ID","that":"Patient_ID"},"columns":[{"column":"Names","nickname":"Patient_names"},{"column":"Lastnames","nickname":"Patient_lastnames"}]}]',
        columns: '[{"title":"Staff","row":"Photo|Staff_names|Staff_lastnames","type":"fullname-photo","format":"title","table":"staff","other_id":"Staff_ID","parts":"photo|name|lastname","column":"Names","link_same":"edit","search":["Names","Lastnames"],"priority":1},{"title":"Paciente","row":"Patient_names|Patient_lastnames","type":"fullname","format":"medium","table":"patients","other_id":"Patient_ID","parts":"name|lastname","column":"Names","link_same":"edit","search":["Names","Lastnames"],"priority":1},{"title":"Modalidad","row":"Mode","type":"trait","format":"medium","table":"appointments","trait":"mode","priority":2},{"title":"Fecha","row":"Date","type":"date","format":"medium","table":"appointments","search":["Date"],"priority":2},{"title":"Hora","row":"Time","type":"time","format":"medium","table":"appointments","search":["Time"],"priority":2},{"title":"Creado","row":"Created","type":"Date","format":"medium","table":"appointments","priority":4},{"title":"Estado","row":"Status","type":"trait","format":"medium","table":"appointments","trait":"status","priority":3},{"title":"","type":"buttons","format":"buttons","table":"appointments","buttons":["view","edit","delete"],"priority":1}]',
        search: $('#s').val(),
        date_range_start: $('#date_range_start').val(),
        date_range_end: $('#date_range_end').val(),
        length: $('.filter_rows.active').data('val'),
        filters: $('.filter_column.active').map(function(){ return [$.map($(this).data(), function(k,v) { return v+'-'+k; })]; }).get(),
        pre_filter: ''
      });
    },
    complete: function(data) {
      console.log('table ajax complete!');
      console.log(data);
    },
    /**
    success: function(data) {
      console.log('table generation successful!');
      console.log(data);
    },
    error: function(data) {
      console.log('error generating table');
      console.log(data);
      $(".staff-table-error").html("");
      $("#staff-table").append('<tbody class="staff-table-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
      $("#staff-table_processing").css("display", "none");
    },
    /**/
    type: 'post',
  },
  "columns": columnKeys,
  "language": {
    "processing": '<i class="fas fa-spinner fa-spin"></i> Cargando...',
    "zeroRecords": 'No se encontraron registros',
    "info": 'Mostrando página _PAGE_ de _PAGES_',
    "infoEmpty": 'No hay registros disponibles',
    "infoFiltered": '(filtrados de _MAX_ registros totales)',
    "paginate": {
      "first": 'Primera',
      "last": 'Última',
      "next": 'Siguiente',
      "previous": 'Anterior'
    },
    "aria": {
      "sortAscending": ': activar para order la columna ascendente',
      "sortDescending": ': activar para order la columna descendente'
    }
  },
  buttons: [
    {
      extend: 'print',
      text: '<svg class="svg-inline--fa fa-print fa-w-10 fa-fw" aria-hidden="true" data-prefix="far" data-icon="print" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M416 192V81.9c0-6.4-2.5-12.5-7-17L351 7c-4.5-4.5-10.6-7-17-7H120c-13.3 0-24 10.7-24 24v168c-53 0-96 43-96 96v136c0 13.3 10.7 24 24 24h72v40c0 13.3 10.7 24 24 24h272c13.3 0 24-10.7 24-24v-40h72c13.3 0 24-10.7 24-24V288c0-53-43-96-96-96zM144 48h180.1L368 91.9V240H144V48zm224 416H144v-80h224v80zm96-64h-48v-40c0-13.2-10.8-24-24-24H120c-13.2 0-24 10.8-24 24v40H48V288c0-26.5 21.5-48 48-48v24c0 13.2 10.8 24 24 24h272c13.2 0 24-10.8 24-24v-24c26.5 0 48 21.5 48 48v112zm-8-96c0 13.3-10.7 24-24 24s-24-10.7-24-24 10.7-24 24-24 24 10.7 24 24z"></path></svg> Print',
      exportOptions: {
        columns: ':not(.buttons)',
      }
    },
    {
      extend: 'csv',
      charset: 'UTF-16LE',
      bom: true,
      text: '<svg class="svg-inline--fa fa-table fa-w-16 fa-fw" aria-hidden="true" data-prefix="fal" data-icon="table" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M464 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM160 448H48c-8.837 0-16-7.163-16-16v-80h128v96zm0-128H32v-96h128v96zm0-128H32V96h128v96zm160 256H192v-96h128v96zm0-128H192v-96h128v96zm0-128H192V96h128v96zm160 160v80c0 8.837-7.163 16-16 16H352v-96h128zm0-32H352v-96h128v96zm0-128H352V96h128v96z"></path></svg> CSV',
      exportOptions: {
        columns: ':not(.buttons)',
      }
    },
    {
      extend: 'excel',
      text: '<svg class="svg-inline--fa fa-file-excel fa-w-12 fa-fw" aria-hidden="true" data-prefix="fal" data-icon="file-excel" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" data-fa-i2svg=""><path fill="currentColor" d="M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zm-22.6 22.7c2.1 2.1 3.5 4.6 4.2 7.4H256V32.5c2.8.7 5.3 2.1 7.4 4.2l83.9 83.9zM336 480H48c-8.8 0-16-7.2-16-16V48c0-8.8 7.2-16 16-16h176v104c0 13.3 10.7 24 24 24h104v304c0 8.8-7.2 16-16 16zM211.7 308l50.5-81.8c4.8-8-.9-18.2-10.3-18.2h-4.1c-4.1 0-7.9 2.1-10.1 5.5-31 48.5-36.4 53.5-45.7 74.5-17.2-32.2-8.4-16-45.8-74.5-2.2-3.4-6-5.5-10.1-5.5H132c-9.4 0-15.1 10.3-10.2 18.2L173 308l-59.1 89.5c-5.1 8 .6 18.5 10.1 18.5h3.5c4.1 0 7.9-2.1 10.1-5.5 37.2-58 45.3-62.5 54.4-82.5 31.5 56.7 44.3 67.2 54.4 82.6 2.2 3.4 6 5.4 10 5.4h3.6c9.5 0 15.2-10.4 10.1-18.4L211.7 308z"></path></svg> Excel',
      exportOptions: {
        columns: ':not(.buttons)',
      }
    },
    {
      extend: 'pdf',
      className: 'btn-list',
      text: '<svg class="svg-inline--fa fa-file-pdf fa-w-12 fa-fw" aria-hidden="true" data-prefix="fal" data-icon="file-pdf" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" data-fa-i2svg=""><path fill="currentColor" d="M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zm-22.6 22.7c2.1 2.1 3.5 4.6 4.2 7.4H256V32.5c2.8.7 5.3 2.1 7.4 4.2l83.9 83.9zM336 480H48c-8.8 0-16-7.2-16-16V48c0-8.8 7.2-16 16-16h176v104c0 13.3 10.7 24 24 24h104v304c0 8.8-7.2 16-16 16zm-22-171.2c-13.5-13.3-55-9.2-73.7-6.7-21.2-12.8-35.2-30.4-45.1-56.6 4.3-18 12-47.2 6.4-64.9-4.4-28.1-39.7-24.7-44.6-6.8-5 18.3-.3 44.4 8.4 77.8-11.9 28.4-29.7 66.9-42.1 88.6-20.8 10.7-54.1 29.3-58.8 52.4-3.5 16.8 22.9 39.4 53.1 6.4 9.1-9.9 19.3-24.8 31.3-45.5 26.7-8.8 56.1-19.8 82-24 21.9 12 47.6 19.9 64.6 19.9 27.7.1 28.9-30.2 18.5-40.6zm-229.2 89c5.9-15.9 28.6-34.4 35.5-40.8-22.1 35.3-35.5 41.5-35.5 40.8zM180 175.5c8.7 0 7.8 37.5 2.1 47.6-5.2-16.3-5-47.6-2.1-47.6zm-28.4 159.3c11.3-19.8 21-43.2 28.8-63.7 9.7 17.7 22.1 31.7 35.1 41.5-24.3 4.7-45.4 15.1-63.9 22.2zm153.4-5.9s-5.8 7-43.5-9.1c41-3 47.7 6.4 43.5 9.1z"></path></svg> PDF',
      exportOptions: {
        columns: ':not(.buttons)',
      }
    }
  ],
  initComplete: function () {
    dataTable.buttons().container().appendTo($('#export_buttons'));
    $('div.button-dropdown').removeClass('temp-active');
  },
  "drawCallback": function( settings ) {
    $('.dataTables_paginate a').addClass('custom-btn');
  }
});

$('#s').keyup(function(e){
  dataTable.draw();
});

$('#date_range_start, #date_range_end').change(function(e){
  dataTable.draw();
});

$('.filter_rows').click(function(){
  var row = $(this).data('val');
  $('.filter_rows').removeClass('active');
  $(this).addClass('active');
  dataTable.page.len(row).draw();
});

$('.filter_column').click(function(){
  console.log($('.filter_column.active').map(function(){ return [$.map($(this).data(), function(k,v) { return v+'-'+k; })]; }).get());
  $(this).parent().find('.filter_column').removeClass('active');
  $(this).addClass('active');
  dataTable.draw();
});

$(function(){
  $('#appointments').DataTable().columns.adjust().responsive.recalc();
});

Fredtholomew

Html code (after getting the data via Ajax):

<table id="appointments" class="table-ajax dt active dataTable no-footer dtr-inline" style="width: 100%;" aria-describedby="appointments_info">
    <colgroup>
    <col style="width: 198.788px;">
    <col style="width: 198.863px;">
    <col style="width: 161.812px;">
    <col style="width: 144.35px;">
    <col style="width: 111.75px;">
    <col style="width: 232.3px;">
    <col style="width: 125.388px;">
    <col style="width: 112.1px;">
    </colgroup>
    <thead>
        <tr role="row">
            <th class="dt-title dt-orderable-asc dt-orderable-desc" data-priority="1" data-dt-column="0" rowspan="1" colspan="1" aria-label="Staff: Activate to sort" tabindex="0"><span class="dt-column-title" role="button">Staff</span><span class="dt-column-order"></span></th>
            <th class="dt-medium dt-orderable-asc dt-orderable-desc" data-priority="1" data-dt-column="1" rowspan="1" colspan="1" aria-label="Paciente: Activate to sort" tabindex="0"><span class="dt-column-title" role="button">Paciente</span><span class="dt-column-order"></span></th>
            <th class="dt-medium dt-orderable-asc dt-orderable-desc dt-ordering-desc" data-priority="2" data-dt-column="2" rowspan="1" colspan="1" aria-sort="descending" aria-label="Modalidad: Activate to invert sorting" tabindex="0"><span class="dt-column-title" role="button">Modalidad</span><span class="dt-column-order"></span></th>
            <th class="dt-medium dt-orderable-asc dt-orderable-desc" data-priority="2" data-dt-column="3" rowspan="1" colspan="1" aria-label="Fecha: Activate to sort" tabindex="0"><span class="dt-column-title" role="button">Fecha</span><span class="dt-column-order"></span></th>
            <th class="dt-medium dt-orderable-asc dt-orderable-desc" data-priority="2" data-dt-column="4" rowspan="1" colspan="1" aria-label="Hora: Activate to sort" tabindex="0"><span class="dt-column-title" role="button">Hora</span><span class="dt-column-order"></span></th>
            <th class="dt-medium dt-orderable-asc dt-orderable-desc" data-priority="4" data-dt-column="5" rowspan="1" colspan="1" aria-label="Creado: Activate to sort" tabindex="0"><span class="dt-column-title" role="button">Creado</span><span class="dt-column-order"></span></th>
            <th class="dt-medium dt-orderable-asc dt-orderable-desc" data-priority="3" data-dt-column="6" rowspan="1" colspan="1" aria-label="Estado: Activate to sort" tabindex="0"><span class="dt-column-title" role="button">Estado</span><span class="dt-column-order"></span></th>
            <th class="dt-buttons dt-orderable-none" data-priority="1" data-dt-column="7" rowspan="1" colspan="1" aria-label=""><span class="dt-column-title"></span><span class="dt-column-order"></span></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="title dtr-control"><a href="http://localhost/agendosalud/admin/staff/edit/?id=1">
                <div class="with-figure">
                    <figure class="user-figure background-6">KY</figure>
                    Kim Ye-Won</div>
                </a></td>
            <td class="medium"><a href="http://localhost/agendosalud/admin/patients/edit/?id=1">Frederick Corazao</a></td>
            <td class="medium sorting_1">Online</td>
            <td class="medium">19-02-2024</td>
            <td class="medium">09:00:00</td>
            <td class="medium">2024-02-18 08:54:37</td>
            <td class="medium">Activo</td>
            <td class="buttons"><a href="http://localhost/agendosalud/admin/appointments/view/?id=1">
                <svg class="svg-inline--fa fa-eye" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="eye" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg="">
                    <path fill="currentColor" d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM432 256c0 79.5-64.5 144-144 144s-144-64.5-144-144s64.5-144 144-144s144 64.5 144 144zM288 192c0 35.3-28.7 64-64 64c-11.5 0-22.3-3-31.6-8.4c-.2 2.8-.4 5.5-.4 8.4c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-2.8 0-5.6 .1-8.4 .4c5.3 9.3 8.4 20.1 8.4 31.6z"></path>
                </svg>
                <!-- <i class="fa-solid fa-eye"></i> --></a><a href="http://localhost/agendosalud/admin/appointments/edit/?id=1">
                <svg class="svg-inline--fa fa-pen" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="pen" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
                    <path fill="currentColor" d="M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z"></path>
                </svg>
                <!-- <i class="fa-solid fa-pen"></i> --></a><a class="delete-row" data-id="1">
                <svg class="svg-inline--fa fa-trash" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="trash" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
                    <path fill="currentColor" d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"></path>
                </svg>
                <!-- <i class="fa-solid fa-trash"></i> --></a></td>
        </tr>
        <tr>
            <td class="title dtr-control"><a href="http://localhost/agendosalud/admin/staff/edit/?id=1">
                <div class="with-figure">
                    <figure class="user-figure background-6">KY</figure>
                    Kim Ye-Won</div>
                </a></td>
            <td class="medium"><a href="http://localhost/agendosalud/admin/patients/edit/?id=2"> </a></td>
            <td class="medium sorting_1">Online</td>
            <td class="medium">19-02-2024</td>
            <td class="medium">09:00:00</td>
            <td class="medium">2024-02-18 08:54:37</td>
            <td class="medium">Activo</td>
            <td class="buttons"><a href="http://localhost/agendosalud/admin/appointments/view/?id=2">
                <svg class="svg-inline--fa fa-eye" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="eye" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg="">
                    <path fill="currentColor" d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM432 256c0 79.5-64.5 144-144 144s-144-64.5-144-144s64.5-144 144-144s144 64.5 144 144zM288 192c0 35.3-28.7 64-64 64c-11.5 0-22.3-3-31.6-8.4c-.2 2.8-.4 5.5-.4 8.4c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-2.8 0-5.6 .1-8.4 .4c5.3 9.3 8.4 20.1 8.4 31.6z"></path>
                </svg>
                <!-- <i class="fa-solid fa-eye"></i> --></a><a href="http://localhost/agendosalud/admin/appointments/edit/?id=2">
                <svg class="svg-inline--fa fa-pen" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="pen" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
                    <path fill="currentColor" d="M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z"></path>
                </svg>
                <!-- <i class="fa-solid fa-pen"></i> --></a><a class="delete-row" data-id="2">
                <svg class="svg-inline--fa fa-trash" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="trash" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
                    <path fill="currentColor" d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"></path>
                </svg>
                <!-- <i class="fa-solid fa-trash"></i> --></a></td>
        </tr>
    </tbody>
    <tfoot>
    </tfoot>
</table>

allan

Thanks for the link! I agree - something isn't working there!

Could you load the non .min version of both DataTables and Responsive for me please? I'll trace it through to see what is going wrong.

Thanks,
Allan

Fredtholomew

@allan Thank you for the quick reply!

I made the change, it's loading the non-.min files now.

allan

Magic - thank you. It is the flex box. It auto grows to allow the content to fit into the space, if the content is too wide.

To fix, in this case, add overflow: hidden;' to your main#sakura main#main style.

Allan

Fredtholomew

That did it! Thank you so much!
Quick question, I just added a min-width to a column and some nowrap to others, since they were only hiding when they became absolutely tiny. However, now the table overflows the container before hiding the columns... any ideas?
Sorry for taking so much of your time!

allan

I'm not actually seeing how you are doing the min-width? However, the issue is that the temporary table that Responsive constructs to see what can fit into the space available does not have that min-width also applied, thus the calculations are performed on a collapsed size, and it thinks it can fit in more than it can.

How are you doing the min-width? I wonder if we can apply that to the temp table as well somehow.

Allan

Fredtholomew

Oh that's actually very interesting.
So, most columns have text-wrap: nowrap; that's applied to th.dt-medium and td.dt-medium, which is most of the columns in this case.
min-width: 200px; and text-wrap: nowrap; is applied to th.dt-title and td.dt-title (first column)
Finally, the last column has a min-width: 75px;

Fredtholomew

Hey @allan, any luck with this? I've been trying on my end without any luck.