javascript - gratis - Duplicar el encabezado vacío se produce en la tabla de datos al habilitar scrollX o scrollY cuando se usa Google Chrome

javascript no funciona en chrome

Question

Tengo una datatable en mi programa. Y quiero que se pueda desplazar horizontalmente, así que lo que hice fue así:

var tableI = $(''#table_data'').DataTable({
"bLengthChange": false,
"scrollX": true,
"dom": ''frtp''
});

Salió así (como salida de muestra):

Dobló el encabezado. ¿Cómo voy a arreglar esto?

EDITAR: Aquí hay otra muestra:

aquí está mi código HTML:

<table class="table table-striped" id="act_data" width="100%"> <div style="float:left;width:385px" >
<button type="button" id="edit_acc" class="btn btn-primary" data-toggle="modal" data-target="#editAcc"><span class=" fa fa-edit "> Edit Account</span></button>
<button type="button" id="de_act" class="btn btn-primary" data-toggle="modal" data-target="#DeAcc"><span class=" fa fa-edit "> Activate/Deactivate</span></button>
<!-- <button type="button" id="refresh" class="btn btn-link" data-target="#DeAcc"><span class="fa fa-refresh"></span></button>-->
<a href="<?php echo site_url(''admin/homeAdmin/homepage'')?>?id=6" class="btn btn-link"><span class="fa fa-refresh"></a>
</div><thead class="header">
<tr class="well">
<th style="font-size: 14px;">Employee ID#</th>
<th style="font-size: 14px;">Username</th>
<th style="font-size: 14px;">Account Type</th>
<th style="font-size: 14px;">Status</th>
</tr>
</thead>
<tbody>
<?php if($result != NULL){?>
<?php foreach($result as $row){ ?>
<tr>
<td style="font-size: 15px;padding-left: 20px;">
<?php echo $row->employeeID;?>
<input type="hidden" name="userID" id="userID" value="<?php echo $row->userID;?>" />
<input type="hidden" name="pass" id="pass" value="<?php echo $row->password;?>" />
</td>
<td style="font-size: 15px;padding-left: 20px;">
<?php echo $row->username;?>
</td>
<td style="font-size: 15px;padding-left: 20px;">
<?php echo $row->usertype;?>
</td>
<td style="font-size: 15px;padding-left: 20px;">
<?php echo $row->status; ?>
</td>
</tr>
<?php }?>
<?php }?>
</tbody>
</table> 

Answer 1

Pruebe algo como esto:

"scrollX": ''100%'',

"scrollXInner": ''125%'',

Answer 2

Tuve el mismo problema con la edición para desarrolladores de Firefox y Firefox. La causa principal es que cuando establecemos scrollX:true , datatable agrega un div adicional con una tabla y un encabezado dentro, aparte de la tabla y el encabezado ya construidos. Esto es para obtener el desplazamiento dentro del efecto de mesa.

Datatable, intenta establecer la altura en 0px, para ocultarlo. Algunos navegadores no interpretan esto correctamente.

<tr style="height: 0px;" role="row"> 

Para ocultarlo, cambiar el estilo de esta fila a ''oculto'' romperá la estructura de la tabla. La solución de trabajo sería, tener visibility:''collapse''

Configuración de tabla de datos de muestra:

 tableElement.DataTable({
"scrollX": true,
"initComplete": function(settings, json) {
$(''.dataTables_scrollBody thead tr'').css({visibility:''collapse''});
}
//other datatable configurations...
});

dado que es una tabla, debemos tener visibilidad: ''colapso'' y no visibilidad: ''oculto'' - más información sobre la propiedad css de visibilidad

Answer 3

Tuve el mismo problema en Google Chrome. Esta fue la solución:

.dataTable(
{
"processing": false,
"serverSide": false,
"autoWidth": true,
"columnDefs": [
{"orderable": false, "targets": [5, 6]}
],
"order": [1, ''asc''],
"dom": ''l<"toolbar">frtip'',
drawCallback: function () { // this gets rid of duplicate headers
$(''.dataTables_scrollBody thead tr'').css({ display: ''none'' });
},
scrollY: ''65vh'',
scrollCollapse: true,
paging: false
});

Answer 4

Puede usar el código siguiente en su CSS:

div.dataTables_scrollHeadInner table { margin-bottom: 0px !important; }

Answer 5

Esto funcionó para mí:

$(''#DataTables_Table_0'').on( ''draw.dt'' function() {
$(''.dataTables_scrollBody thead tr'').addClass(''hidden'')
}

Referencia: respuesta de geam de marzo de 2015 en el foro datatables.net

Answer 6

Buena explicación de Sairam. Una mejor sería usar solo un CSS

div.dataTables_scrollBody thead {
display: none;
}