0

Tengo un problema con DataTables que no estoy pudiendo resolver. Este es el codigo de la tabla

 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;
    });
});

Y lo que me ocurre es lo siguiente:

Si yo estoy en un dispositivo movil, solo veo los titulos de mi tabla (la primer columna), y eso esta perfecto. Es como yo lo quiero.

introducir la descripción de la imagen aquí

Ahora, si yo hago una busqueda que NO arroje resultados, ocurre el siguiente error:

introducir la descripción de la imagen aquí

Como pueden ver, si no hay resultados vienen otras columnas que no deberian mostrarse. Alguien conoce alguna solucion para esto? Muchas gracias

1 respuesta 1

0

La tabla parece bien formateada, sin embargo esto parece se resultanto por el height que provocan tus busquedas, cuando tienes busquedas resultantes el formateo es correcto, considera limpiar tus flotados o darle un min-height a tu campo de resultados de busqueda

1
  • 1
    le configuré (para salir del paso) que si no hay resultado de busqueda, me elimine los encabezados. Pero es muy buena tu recomendacion, la voy a poner en practica en cuanto pueda y te comento de nuevo. Muchas gracias
    – Agustin G.
    Commented el 29 ene. 2021 a las 16:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.