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í...
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.