Buenos dias a todos, estoy haciendo una tabla pintada con Datatables y quiero que contenga un scroll X (ya que es muy ancha) pero que sin embargo la primera columna que es la del ID se me quede fija aunque mueva el scroll, permitiendo de esta forma saber siempre de que ID estamos viendo los datos.
Todo funciona bien salvo el dejar fija la columna, en vez de dejarme fija dicha columna me pinta encima de mi tabla otra tabla exactamente igual, fija y sin scroll lateral (viendose bajo esta la otra tabla pero sin poder trabajar con ella) ¿alguien tiene alguna idea de que puede ocurrir?
Os adjunto la parte de codigo de Datatable y FixedColumns para que veais los parametros que uso. Gracias.
$(document).ready(function() {
$.fn.editable.defaults.placeholder='';
var oTable=$('#listado_cuentas').dataTable( {
"oLanguage": {
"sUrl": "./script/localization/dataTables_es.txt"
},
"sDom": 'Rlfrtip',
"sScrollX": "100%",
"sScrollXInner": "150%",
"bScrollCollapse": true,
"sPaginationType": "full_numbers",
"iDisplayLength": 10,
"bLengthChange": true,
"bProcessing": true,
"aoColumnDefs": [{"sClass":"centrado","aTargets":[4]},
{ "bSortable": false, "sClass": "index", "aTargets": [ 0 ] },
{ "bSortable": false, "sClass": "indexRight", "aTargets": [ -1 ] },
{"sClass":"read_only","aTargets":[0,9]},
{"sClass":"id_tabla","aTargets":[0]},
{"fnRender":function(oObj){
return "<img id='borrar_"+oObj.aData[0]+"' style='cursor:pointer;' onclick='eliminaTipoCuenta("+oObj.aData[0]+")' src='./img/unchecked.gif'>";
}, "aTargets":[9]},
],
"aaSorting": [[0,'asc']],
"fnInitComplete": function(){
this.fnFilterOnEnter();
},
"oColReorder": {
"iFixedColumns": 0
},
"fnRowCallback": function(nRow, aData, iDisplayIndex){
$(nRow).attr('id',aData[0]);
return nRow;
},
"fnDrawCallback": function ( oSettings ) {
// Need to redo the counters if filtered or sorted
if ( oSettings.bSorted || oSettings.bFiltered ) {
for ( var i=0, iLen=oSettings.aiDisplay.length ; i<iLen ; i++ ) {
$('td:eq(0)', oSettings.aoData[ oSettings.aiDisplay[i] ].nTr ).html( i+1 );
this.fnUpdate( i+1, oSettings.aiDisplay[i], 0, false, false );
this.fnUpdate( i+1, oSettings.aiDisplay[i], 6, false, false );
}
}
},
} );
new FixedColumns( oTable, {
"iLeftColumns": 1,
"iRightColumns": 1,
} );
oTable.makeEditable({
sUpdateURL: "ajustes_tipos_cuentas_guardar.jsp",
sAddURL: "ajustes_tipos_cuentas_crear.jsp",
sAddHttpMethod: "GET",
oAddNewRowButtonOptions: { label: "Añadir...",
icons: {primary:'ui-icon-plus'}
},
oAddNewRowFormOptions: {
title: 'Crear nuevo tipo',
show: "blind",
modal: true,
width: "410px"
},
sAddDeleteToolbarSelector: ".fila_botones",
sDeleteRowButtonId: "no_button",
fnOnAdded: function(status){
oTable.fnDraw();
}
});
} );