table width extrange problem
table width extrange problem
rodrick26
Posts: 5Questions: 0Answers: 0
Again, Thanks a lot for this awesome plug in.
I have a strange situation with the width of a table.
Each time I refresh the page, the table change randomly in two diferent width.
Correct width:
http://img585.imageshack.us/img585/2434/datatables1.jpg
Strange width:
http://img99.imageshack.us/img99/9738/datatables2.jpg
Maybe I overriding some css properties. But I dont know where to look to find the problem.
Anybody have a clue???
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Title
$(document).ready(function() {
oTable = $('#table01').dataTable( {
"asStripClasses":[],
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
if ( aData[2] == "Sin Asignación" ) $('td:eq(9)', nRow).closest('tr').css('background', '#FFBFBF');
if ( aData[2] == "Confirmada" ) $('td:eq(9)', nRow).closest('tr').css('background', '#FFFFFF');
if ( aData[2] == "Asignada" ) $('td:eq(9)', nRow).closest('tr').css('background', '#FFF9BF');
if ( aData[2] == "En Cabecera" ) $('td:eq(9)', nRow).closest('tr').css('background', '#BFFFBF');
if ( aData[2] == "Finalizada" ) $('td:eq(9)', nRow).closest('tr').css('background', '#88B2D9');
if ( aData[2] == "Anulada" ) $('td:eq(9)', nRow).closest('tr').css('background', '#BABABA');
$('td:eq(1)', nRow).html( '' );
$('td:eq(12)', nRow).html( '' );
return nRow;
},
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "scripts/server_processing_solicitudes_p.php",
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"iDisplayLength": 10,
"aoColumns" : [
{ "bVisible": false },
{ "bVisible": false },
{ "bVisible": false },
{ "bVisible": false },
{ "sClass": "center", "bSortable": false, "sWidth": "10px" },
{ "sClass": "center", "bSortable": false },
{ "sClass": "center" },
{ "sClass": "center" },
{ "sClass": "center" },
{ "sClass": "center" },
{ "sClass": "center" },
{ "sClass": "center" },
{ "sClass": "center" },
{ "sClass": "center" },
{ "sClass": "center", "sWidth": "20px" },
{ "sClass": "center", "sWidth": "10px" },
{ "sClass": "center", "bSortable": false }
],
"oLanguage": {
"sProcessing": "Procesando...",
"sLengthMenu": "Mostrar _MENU_ registros por página",
"sZeroRecords": "No se encontraron resultados",
"sInfo": "Mostrando _START_ - _END_ de _TOTAL_ registros",
"sInfoEmpty": "Mostrando 0 - 0 de 0 registros",
"sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
"sSearch": "Buscar:",
"oPaginate": {
"sFirst": "<<",
"sPrevious": "<",
"sNext": ">",
"sLast": ">>"
}
}
} );
$( "#datepicker" ).datepicker({
dateFormat: "dd-mm-yy",
showOn: 'both',
buttonImageOnly: true,
buttonImage: 'images/calendar_2.png',
buttonText: 'Fecha' });
$( "#datepicker" ).datepicker().change(function() {
oTable.fnFilter( $(this).val());
});
oTable.fnFilter( $(this).val() );
});
@import "media/css/page.css";
@import "media/css/table_jui.css";
@import "media/themes/smoothness/jquery-ui-1.8.16.custom.css";
<?php include("php_style.php"); //Estilo de la página ?>
<?php include("css/links.css"); //Estilo de los links ?>
#navlist li {
display: inline;
list-style-type: none;
padding: 5px 30px 5px 30px;
}
Sin Asignación
Confirmada
Asignada
En Cabecera
Finalizada
Anulada
Todo
Fecha:
Solicitud<!-- OCULTA -->
Nómina<!-- OCULTA -->
Estado<!-- OCULTA -->
Fecha<!-- OCULTA -->
C <!-- Criticidad -->
I <!-- Check -->
Hora
Conductor
Móvil
Pasajero
Rol
Origen
Destino
T.Viaje
Acompañantes
E <!-- Estado Real -->
Acciones
Cargando datos desde el servidor
[/code]
I have a strange situation with the width of a table.
Each time I refresh the page, the table change randomly in two diferent width.
Correct width:
http://img585.imageshack.us/img585/2434/datatables1.jpg
Strange width:
http://img99.imageshack.us/img99/9738/datatables2.jpg
Maybe I overriding some css properties. But I dont know where to look to find the problem.
Anybody have a clue???
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Title
$(document).ready(function() {
oTable = $('#table01').dataTable( {
"asStripClasses":[],
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
if ( aData[2] == "Sin Asignación" ) $('td:eq(9)', nRow).closest('tr').css('background', '#FFBFBF');
if ( aData[2] == "Confirmada" ) $('td:eq(9)', nRow).closest('tr').css('background', '#FFFFFF');
if ( aData[2] == "Asignada" ) $('td:eq(9)', nRow).closest('tr').css('background', '#FFF9BF');
if ( aData[2] == "En Cabecera" ) $('td:eq(9)', nRow).closest('tr').css('background', '#BFFFBF');
if ( aData[2] == "Finalizada" ) $('td:eq(9)', nRow).closest('tr').css('background', '#88B2D9');
if ( aData[2] == "Anulada" ) $('td:eq(9)', nRow).closest('tr').css('background', '#BABABA');
$('td:eq(1)', nRow).html( '' );
$('td:eq(12)', nRow).html( '' );
return nRow;
},
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "scripts/server_processing_solicitudes_p.php",
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"iDisplayLength": 10,
"aoColumns" : [
{ "bVisible": false },
{ "bVisible": false },
{ "bVisible": false },
{ "bVisible": false },
{ "sClass": "center", "bSortable": false, "sWidth": "10px" },
{ "sClass": "center", "bSortable": false },
{ "sClass": "center" },
{ "sClass": "center" },
{ "sClass": "center" },
{ "sClass": "center" },
{ "sClass": "center" },
{ "sClass": "center" },
{ "sClass": "center" },
{ "sClass": "center" },
{ "sClass": "center", "sWidth": "20px" },
{ "sClass": "center", "sWidth": "10px" },
{ "sClass": "center", "bSortable": false }
],
"oLanguage": {
"sProcessing": "Procesando...",
"sLengthMenu": "Mostrar _MENU_ registros por página",
"sZeroRecords": "No se encontraron resultados",
"sInfo": "Mostrando _START_ - _END_ de _TOTAL_ registros",
"sInfoEmpty": "Mostrando 0 - 0 de 0 registros",
"sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
"sSearch": "Buscar:",
"oPaginate": {
"sFirst": "<<",
"sPrevious": "<",
"sNext": ">",
"sLast": ">>"
}
}
} );
$( "#datepicker" ).datepicker({
dateFormat: "dd-mm-yy",
showOn: 'both',
buttonImageOnly: true,
buttonImage: 'images/calendar_2.png',
buttonText: 'Fecha' });
$( "#datepicker" ).datepicker().change(function() {
oTable.fnFilter( $(this).val());
});
oTable.fnFilter( $(this).val() );
});
@import "media/css/page.css";
@import "media/css/table_jui.css";
@import "media/themes/smoothness/jquery-ui-1.8.16.custom.css";
<?php include("php_style.php"); //Estilo de la página ?>
<?php include("css/links.css"); //Estilo de los links ?>
#navlist li {
display: inline;
list-style-type: none;
padding: 5px 30px 5px 30px;
}
Sin Asignación
Confirmada
Asignada
En Cabecera
Finalizada
Anulada
Todo
Fecha:
Solicitud<!-- OCULTA -->
Nómina<!-- OCULTA -->
Estado<!-- OCULTA -->
Fecha<!-- OCULTA -->
C <!-- Criticidad -->
I <!-- Check -->
Hora
Conductor
Móvil
Pasajero
Rol
Origen
Destino
T.Viaje
Acompañantes
E <!-- Estado Real -->
Acciones
Cargando datos desde el servidor
[/code]
This discussion has been closed.