1

Tengo esta tabla en una variable con un plugin llamado DataTable. Donde la uso para poder visualizar solicitudes (o Tickets) en una app de Mesa de Servicios.

var tableAdmin = $("#solicitudesAdmin").DataTable({
                scrollX: true,
                scrollCollapse: true,
                paging: true,
                searching: true,
                ordering: true,
                responsive: true,
                colReorder: true,
                orderCellsTop: true,
                dom: 'lBfrtip',
                stateSave: true,
                stateDuration: 0,
                columnDefs: [
                    { width: '5%', targets: 0 }
                ],
                autoWidth: false,
                order: [[0, 'desc']],
                lengthMenu: [
                      [10, 25, 50, 100, -1],
                      ['10', '25', '50', '100', 'Todo']
                ],
                buttons: [
                      {
                          extend: 'colvis',
                          text: '<i class="fa fa-toggle-on"></i> Columnas',
                      },
                      {
                          extend: 'excelHtml5',
                          filename: 'solicitudesAdmin',
                          title: 'solicitudesAdmin',
                          text: 'Exportar a Excel',
                          exportOptions: {
                              columns: ':visible',
                          }
                      },
                      {
                          text: 'Borrar Filtros',
                          action: function (e, dt, node, config) {

                              var coleccion = $("#solicitudesAdmin thead input");

                              console.log('Coleccion: ' + coleccion.length);
                              console.log('borrando con coleccion');
                              for (i = 0; i < coleccion.length - 1 ; i++) {
                                  console.log(i);
                                  elem = coleccion[i];
                                  if (elem != null) {
                                      console.log(elem.id);
                                      document.getElementById(elem.id).value = '';
                                  }
                              }
                              console.log('borrando');
                              var table = $('#solicitudesAdmin').DataTable();
                              table
                               .search('')
                               .columns().search('')
                               .draw();
                          }
                      }
                ],
                language: {
                    url: '//cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json'
                }
            });

Y se vería algo como así...

introducir la descripción de la imagen aquí

El problema que tengo o duda más bien sería que cómo podría mover o ponerle un poco más de margen entre los botones por ejemplo:

Que no esté tan pegado al combobox de los registros a visualizar y/o cambiarle el tipo de letra.

1 respuesta 1

0

Para hacerlo debes modificar el dom en los parámetros con los que inicializas datatable, te puedo dejar el link para que revises mas sobre ello en la página oficial:

https://datatables.net/reference/option/dom

Para resolver tu problema solamente deberías agregar un div con una clase en los botones para que puedas darle un margen izquierdo que lo separe del input de registros

var tableAdmin = $("#solicitudesAdmin").DataTable({
  dom: 'l<"ml-2" B>frtip',
  scrollX: true,
  scrollCollapse: true,
  paging: true,
  searching: true,
  ordering: true,
  responsive: true,
  colReorder: true,
  orderCellsTop: true,
  stateSave: true,
  stateDuration: 0,
  columnDefs: [
      { width: '5%', targets: 0 }
  ],
  autoWidth: false,
  order: [[0, 'desc']],
  lengthMenu: [
        [10, 25, 50, 100, -1],
        ['10', '25', '50', '100', 'Todo']
  ],
  buttons: [
        {
            extend: 'colvis',
            text: '<i class="fa fa-toggle-on"></i> Columnas',
        },
        {
            extend: 'excelHtml5',
            filename: 'solicitudesAdmin',
            title: 'solicitudesAdmin',
            text: 'Exportar a Excel',
            exportOptions: {
                columns: ':visible',
            }
        },
        {
            text: 'Borrar Filtros',
            action: function (e, dt, node, config) {

                var coleccion = $("#solicitudesAdmin thead input");

                console.log('Coleccion: ' + coleccion.length);
                console.log('borrando con coleccion');
                for (i = 0; i < coleccion.length - 1 ; i++) {
                    console.log(i);
                    elem = coleccion[i];
                    if (elem != null) {
                        console.log(elem.id);
                        document.getElementById(elem.id).value = '';
                    }
                }
                console.log('borrando');
                var table = $('#solicitudesAdmin').DataTable();
                table
                 .search('')
                 .columns().search('')
                 .draw();
            }
        }
  ],
  language: {
      url: '//cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json'
  }
});
.ml-2 {
  margin-left: .5rem;
}

Tu Respuesta

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

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