jquery - Error with columns on datatable responsive when search is empty

Question

I have the following problem:

In mobile, I just see the first column of my table, thats right.

But, if I do a search that returns no results, this happens:

As you can see, if there are no results, other columns come that should not be shown. Does anyone know any solution for this? Thanks a lot

This is my dataTable code:

 jQuery(document).ready(function($) {

  tableContainer = jQuery("#table-1");
  tableContainer.dataTable({
    // rowReorder: {
    //     selector: 'td:nth-child(1)'
    // },
    'order': [
      [0, 'desc']
    ],
    "pageLength": 25,
    "processing": true,
    "serverSide": true,
    "bStateSave": true,
    "processing": true,
    "serverSide": true,
    "ajax": {
      "url": adminAjax,
      type: 'POST',
      dataSrc: 'data',
      'data': function(data) {
        // PODEMOS MODIFICAR EL OBJETO QUE SE MANDA POR AJAX A LA CONSULTA
        var DatosForm = Get_data_form();
        data = $.extend({}, data, DatosForm);
        console.log( data );
        LastData = data;
        return data;
      },
    },
    "drawCallback": function(settings) {
      // Here the response
      var response = settings.json;
      console.log(response);
    },
    "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
      // Esto modifica el buscador, agregando un placeholder
      // let stringBuscar = $("#table-1_filter").html();
      // let str2 = stringBuscar.replace('Buscar: ','');
      // let str3 = str2.replace('placeholder=""','placeholder="Buscar..."');
      // $("#table-1_filter").html(str3); 

      //Esto el selector de cantidad de pagnas
      // let stringCant = $("#table-1_length").html();
      // let str = stringCant.replace(' Registros por página',' Registros')
      // $("#table-1_length").html(str)
      // No creo que vaya aca

      console.log(aData);

      $('.dataTables_scroll').parent().css('padding', '0');
      $('#ediatr_info_solicitud .container .row .col-sm-8 input').removeClass('form-control');
      $('td:eq(0)', nRow).addClass('td-titulo').attr('data-id', aData.id);
      $('td:eq(1)', nRow).addClass('td-modalidad');
      $('td:eq(2)', nRow).addClass('td-empleados');
      $('td:eq(3)', nRow).addClass('td-fecha');
      $('td:eq(5)', nRow).addClass('td-estado');
      if (aData.estado == '1') {
        $('td:eq(4)', nRow).addClass('tabla-estado-pendiente');
      } else if (aData.estado == '2') {
        $('td:eq(4)', nRow).addClass('tabla-estado-revision');
      } else if (aData.estado == '3') {
        $('td:eq(4)', nRow).addClass('tabla-estado-aprobada');
      } else if (aData.estado == '4' || aData.estado == '5') {
        $('td:eq(4)', nRow).addClass('tabla-estado-rechazada');
      } else if (aData.estado == '90') {
        $('td:eq(4)', nRow).addClass('tabla-estado-realizada');
      }
    },
    "columns": [{
        "data": "post_title",
        "name": "p.post_title",
        "title": "Curso",
        "orderable": true,
        "width": "30%",
        responsivePriority: 1,
        "className": 'sys_open_box'
      },
      {
        "data": "modalidad",
        "name": "p.modalidad",
        "title": "Modalidad",
        "orderable": true,
        "width": "10%",
        "className": 'tabla-tipo tabla-modalidad'
      },
      {
        "data": "cantidad",
        "name": "c.cantidad",
        "title": "Empleados",
        "orderable": true,
        "width": "5%",
        "className": 'tabla-tipo tabla-modalidad'
      },
      {
        "data": "nom_periodo",
        "name": "pe.fecha_desde",
        "title": "Fecha estimada",
        "orderable": true,
        "width": "35%",
        "className": 'tabla-fecha'
      },
      {
        "data": "estado_text",
        "name": "estado_text",
        "title": "Estado",
        "orderable": true,
        "width": "10%",
        "className": 'tabla-empleados'
      },
      {
        "data": "acciones",
        "name": "",
        "title": "Acciones",
        "orderable": false,
        "width": "10%",
        "className": 'tabla-empleados',
        responsivePriority: 1
      },

    ],
    "oLanguage": {
      "sLengthMenu": "Mostrar _MENU_ Registros por página",
      "sSearch": "",
      "searchPlaceholder": 'Buscar...',
      "sProcessing": "Cargando...",
      "sLoadingRecords": 'Cargando...',
      "sZeroRecords": "No se encontraron Registros.",
      "sEmptyTable": "No se encontraron Registros.",
      "sInfo": "Registros desde _START_ a _END_ de _TOTAL_ totales",
      "sInfoEmpty": "Registros desde 0 a 0 de 0 total",
      "sInfoFiltered": "(Registros Totales _MAX_)",
      "info": "Showing page _PAGE_ of _PAGES_",
      "oPaginate": {
        "sFirst": "Premier",
        "sLast": "Ultima",
        "sNext": ">",
        "sPrevious": "<"
      }
    },
    "language": {
      search: '',
      searchPlaceholder: 'Buscar...'
    },
    initComplete: function() {
      $("#table-1_filter").append(
        `<div class="container-filtro-mis-solicitudes">
          <div class="mis-solicitudes-filtro">
            <div class="selected-curso">
              <span>Filtrar...</span><i class="fas fa-chevron-down"></i>
            </div>
            <div class="options-cursos">
              <div class="option-curso" data-id="">
                Ver todos
              </div>
              <?php foreach ($categorias as $c) { ?>
              <div class="option-curso" data-id="<?php echo $c->term_id; ?>">
                <?php echo $c->name; ?>
              </div>
              <?php } ?>
            </div>
          </div>
        </div>

        ` +
        '<div class="export-data">' +
        '   <div class="DTTT btn-group"> ' +
        //'     <a href="javascript:exportar_consulta_excel();" class="btn btn-white DTTT_button_print" title="Exportar resultados"><span>Exportar resultados</span></a>' +
        //'     <a href="javascript:exportar_all_excel();"  class="btn btn-white DTTT_button_print" title="Exportar Todo"><span>Exportar todo</span></a>' +
        '   </div>' +
        '</div>'
      );
      $('#table-1 > tbody > tr').addClass('tr_clas_users');
      // jQuery("#table-1").append( jQuery('<tfoot/>').append( jQuery("#table-1 thead tr").clone() ) );
    },
    // 'responsive' : true,
    'bAutoWidth': false
  });


  $("#table-1_wrapper .dataTables_filter input")
    .unbind() // Unbind previous default bindings
    .bind("input", function(e) { // Bind our desired behavior
      // If the length is 3 or more characters, or the user pressed ENTER, search
      if (this.value.length >= 3 || e.keyCode == 13) {
        // Call the API search function
        tableContainer.api().search(this.value).draw();
      }
      // Ensure we clear the search if they backspace far enough
      if (this.value == "") {
        tableContainer.api().search("").draw();
      }
      return;
    });
});

question from:https://stackoverflow.com/questions/65939089/error-with-columns-on-datatable-responsive-when-search-is-empty

Answer 1

Waitting for answers