0

Buenas tardes tengo problemas con la manera en que se ve mi contenido de la tabla html. El código

 /*
                         Please consider that the JS part isn't production ready at all, I just code it to show the concept of merging filters and titles together !
                         */
                        $(document).ready(function () {
                            $('.filterable .btn-filter').click(function () {
                                var $panel = $(this).parents('.filterable'),
                                        $filters = $panel.find('.filters input'),
                                        $tbody = $panel.find('.table tbody');
                                if ($filters.prop('disabled') == true) {
                                    $filters.prop('disabled', false);
                                    $filters.first().focus();
                                } else {
                                    $filters.val('').prop('disabled', true);
                                    $tbody.find('.no-result').remove();
                                    $tbody.find('tr').show();
                                }
                            });

                            $('.filterable .filters input').keyup(function (e) {
                                /* Ignore tab key */
                                var code = e.keyCode || e.which;
                                if (code == '9')
                                    return;
                                /* Useful DOM data and selectors */
                                var $input = $(this),
                                        inputContent = $input.val().toLowerCase(),
                                        $panel = $input.parents('.filterable'),
                                        column = $panel.find('.filters th').index($input.parents('th')),
                                        $table = $panel.find('.table'),
                                        $rows = $table.find('tbody tr');
                                /* Dirtiest filter function ever ;) */
                                var $filteredRows = $rows.filter(function () {
                                    var value = $(this).find('td').eq(column).text().toLowerCase();
                                    return value.indexOf(inputContent) === -1;
                                });
                                /* Clean previous no-result if exist */
                                $table.find('tbody .no-result').remove();
                                /* Show all rows, hide filtered ones (never do that outside of a demo ! xD) */
                                $rows.show();
                                $filteredRows.hide();
                                /* Prepend no-result row if all rows are filtered */
                                if ($filteredRows.length === $rows.length) {
                                    $table.find('tbody').prepend($('<tr class="no-result text-center"><td colspan="' + $table.find('.filters th').length + '">No result found</td></tr>'));
                                }
                            });
                        });
                        
.fixed_header{
    width: 100%;
    table-layout: fixed;
    
}

.fixed_header tbody{
  display:block;
  width: 100%;
  overflow: auto;
  height: 200px;
}

.fixed_header thead tr {
   display: block;
}

.fixed_header th, .fixed_header td {
 
  width: 200px;
}

 .filterable {
                            margin-top: 15px;
							
							
                        }
                        .filterable .panel-heading .pull-right {
                            margin-top: -20px;
							
                        }
                        .filterable .filters input[disabled] {
                            background-color: transparent;
                            border: none;
                            cursor: auto;
                            box-shadow: none;
                            padding: 0;
                            height: auto;
														
							
                        }
                        .filterable .filters input[disabled]::-webkit-input-placeholder {
                            color: #333;
							font-size: 100%;			
							
                        }
                        .filterable .filters input[disabled]::-moz-placeholder {
                            color: #333;
                        }
                        .filterable .filters input[disabled]:-ms-input-placeholder {
                            color: #333;
                        }
 <div class="panel filterable panel-primary">
                    <div class="panel-heading">
                    <button class="btn btn-primary btn-filter" style="margin-right:10px"><span class="glyphicon glyphicon-search"></span> Buscar</button>
                    
                    </div>
                    <table class="table fixed_header" style="height: 50px;">
  <thead>
    <tr class="filters">
								  			
											
											<th><input type="text" class="form-control text-center" style="padding-left: -50px" placeholder="Fecha Turno" disabled></th>
											<th><input type="text" class="form-control text-center" placeholder="Hs Turno" disabled></th>
											<th><input type="text" class="form-control text-center" placeholder="Prestador" disabled></th>
											<th><input type="text" class="form-control text-center" placeholder="Afiliado" disabled></th>
											<th><input type="text" class="form-control text-center" placeholder="Cancelado?" disabled></th>
											<th><input type="text" class="form-control text-center" placeholder="#" disabled></th>
													 
                                        </tr>
  </thead>
  <tbody>
    
      <tr class="text-center">
        
        <td>12-03-2020</td>
        <td>15:30</td>
		<td>Carlos Sanchez</td>
		<td>Franco Fernandez</td>
		<td>NO</td>
        
		<td><a>Cancelar</a></td>
		
		
      </tr>
    
  </tbody>
</table>
</div>

que tengo es el siguiente, yo quisiera que abarque todo el ancho del panel-primary.

1 respuesta 1

0

No creo que este sea el problema pero por que que manejas las cabeceras de la tabla con inputs ?

<thead>
<tr class="filters">
<th><input type="text" class="form-control text-center" style="padding-left: -50px" placeholder="Fecha Turno" disabled></th>
<th><input type="text" class="form-control text-center" placeholder="Hs Turno" disabled></th>
<th><input type="text" class="form-control text-center" placeholder="Prestador" disabled></th>
<th><input type="text" class="form-control text-center" placeholder="Afiliado" disabled></th>
<th><input type="text" class="form-control text-center" placeholder="Cancelado?" disabled></th>
<th><input type="text" class="form-control text-center" placeholder="#" disabled></th>

lo "tradicional" para crear una cabecera de tabla seria algo como esto:

<thead>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
</thead>

Ya si le quieres dar un formato para que se vea "mas bonito" puedes optar por algo así

<thead>	
                <tr>
                <th label class="input-group-addon" style=" font-size:10px; background-color: #5BC0DE;">ACTIVO</th>
                <th label class="input-group-addon" style=" font-size:10px; background-color: #5BC0DE;">SUB ACTIVO</th>
                <th label class="input-group-addon" style=" font-size:10px; background-color: #5BC0DE;">ETIQUETA</th>
                <th label class="input-group-addon" style=" font-size:10px; background-color: #5BC0DE;">NUMERO DE SERIE</th>
                <th label class="input-group-addon" style=" font-size:10px; background-color: #5BC0DE;">TIPO ACTIVO</th>
                </tr>
            </thead> 

Si gustas puedes checar este sitio web dataTables a lo mejor te puede ayudar.

Saludos

2
  • Porque los utilizo como un método de búsqueda con javascript. Commented el 28 feb. 2020 a las 11:40
  • ¡Intentemos evitar los estilos en línea cuando sea posible! :) Commented el 18 abr. 2020 a las 9:52

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.