Header columns are not aligned with the data columns
Header columns are not aligned with the data columns
fboland
Posts: 18Questions: 0Answers: 0
Hi,
All is on the title, i search on the forum and find a lot of discussion about this problem but without a solution for me.
You can show a screenshot here : http://lerelaisimmobilier.com/Screenshot.png
And the datatable code :
[code]
$.ajax(
{
type: 'GET',
dataType: 'json',
url: "ajax/DataTable.php",
data: {'dataTableName':Self_dataTable.dataTableName, 'required':'ColumnsDef'},
success: function(dataCols)
{
// Mise à jour de la variable des champs
fields = dataCols.aoColumns;
// Création du datatable
Self_dataTable.dataTable = $table.dataTable(
{
"sDom": "RrtS",
"sScrollX": "100%",
"sScrollY": "500px",
"bServerSide": true,
"bProcessing": true,
"aoColumns": fields,
"bDeferRender": true,
"sAjaxSource": "ajax/DataTable.php",
"fnServerData": function (sSource, aoData, fnCallback, oSettings)
{
// Ajout de paramètre supplémentaire
// Type de demande "données"
aoData.push({'name':'required', 'value':'Data'});
// Nom du dataTable
if(!$.isNue(Self_dataTable.dataTableName)) aoData.push({'name':'dataTableName', 'value':Self_dataTable.dataTableName});
// Paramètre ajax
if(!$.isNue(Self_dataTable.paramAjax)) aoData.push({'name':'paramAjax', 'value':Self_dataTable.paramAjax});
// Exécution de la requête ajax
oSettings.jqXHR = $.ajax(
{
"dataType": 'json',
"type": "GET",
"url": sSource,
"data": aoData,
"success": function(data)
{
// Exécution de la fonction par défaut
fnCallback.call(null, data);
}
});
}
});
}
});
[/code]
"fields" var json lool like this :
[code]
{
"aoColumns":[
{
"sTitle":"aze",
"mData":"toto",
"sDbOrder":"toto",
"sDbSearch":"toto",
"sType":"string",
"sWidth":"200px",
"sClass":"align-center",
"bSortable":true,
"bSearchable":true
},
{
"sTitle":"aze",
"mData":"tata",
"sDbOrder":"tata",
"sDbSearch":"",
"sType":"string",
"sWidth":"90px",
"sClass":"align-center",
"bSortable":true,
"bSearchable":true
},
{
"sTitle":"aze",
"mData":"titi",
"sDbOrder":"",
"sDbSearch":"",
"sType":"string",
"sWidth":"90px",
"sClass":"align-center",
"bSortable":true,
"bSearchable":true
},
.....
]
}
[/code]
All is on the title, i search on the forum and find a lot of discussion about this problem but without a solution for me.
You can show a screenshot here : http://lerelaisimmobilier.com/Screenshot.png
And the datatable code :
[code]
$.ajax(
{
type: 'GET',
dataType: 'json',
url: "ajax/DataTable.php",
data: {'dataTableName':Self_dataTable.dataTableName, 'required':'ColumnsDef'},
success: function(dataCols)
{
// Mise à jour de la variable des champs
fields = dataCols.aoColumns;
// Création du datatable
Self_dataTable.dataTable = $table.dataTable(
{
"sDom": "RrtS",
"sScrollX": "100%",
"sScrollY": "500px",
"bServerSide": true,
"bProcessing": true,
"aoColumns": fields,
"bDeferRender": true,
"sAjaxSource": "ajax/DataTable.php",
"fnServerData": function (sSource, aoData, fnCallback, oSettings)
{
// Ajout de paramètre supplémentaire
// Type de demande "données"
aoData.push({'name':'required', 'value':'Data'});
// Nom du dataTable
if(!$.isNue(Self_dataTable.dataTableName)) aoData.push({'name':'dataTableName', 'value':Self_dataTable.dataTableName});
// Paramètre ajax
if(!$.isNue(Self_dataTable.paramAjax)) aoData.push({'name':'paramAjax', 'value':Self_dataTable.paramAjax});
// Exécution de la requête ajax
oSettings.jqXHR = $.ajax(
{
"dataType": 'json',
"type": "GET",
"url": sSource,
"data": aoData,
"success": function(data)
{
// Exécution de la fonction par défaut
fnCallback.call(null, data);
}
});
}
});
}
});
[/code]
"fields" var json lool like this :
[code]
{
"aoColumns":[
{
"sTitle":"aze",
"mData":"toto",
"sDbOrder":"toto",
"sDbSearch":"toto",
"sType":"string",
"sWidth":"200px",
"sClass":"align-center",
"bSortable":true,
"bSearchable":true
},
{
"sTitle":"aze",
"mData":"tata",
"sDbOrder":"tata",
"sDbSearch":"",
"sType":"string",
"sWidth":"90px",
"sClass":"align-center",
"bSortable":true,
"bSearchable":true
},
{
"sTitle":"aze",
"mData":"titi",
"sDbOrder":"",
"sDbSearch":"",
"sType":"string",
"sWidth":"90px",
"sClass":"align-center",
"bSortable":true,
"bSearchable":true
},
.....
]
}
[/code]
This discussion has been closed.
Replies
I try set manualy : .dataTables_scrollBody { overflow-x: auto; overflow-y: hidden; }
instead of .dataTables_scrollBody { overflow: auto; }
and the problem disepear.
But i need an y axes scroll bar.
How can i do ?
If you have `border-collapse: collapse` in your CSS for the table, change it to be `border-collapse: separate` as collapse will not work.
Allan
[code]
::-webkit-scrollbar { margin-left: 3px; width: 8px; height: 8px;} /*-- barre globale --*/
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.3); border-radius: 0; background-color: rgba(255, 255, 255, 1)} /*-- arriere plan scroll --*/
::-webkit-scrollbar-thumb {border-radius: 10px; background-color: rgba(0,0,0,0.3); -webkit-box-shadow: none;} /*-- barre de scroll --*/
scrollbar { -moz-appearance: none !important;} /*-- clear useragent default style --*/
scrollbarbutton { -moz-appearance: none !important;} /*-- buttons at two ends --*/
thumb {-moz-appearance: none !important;}/*-- the sliding part --*/
scrollcorner {-moz-appearance: none !important; resize:both;}
scrollbar[orient="vertical"] {color:silver;} /*-- vertical or horizontal --*/
[/code]
I remove this part and all works fine.
Do you have an idee how i can keep my custom scrollbar without bug on alignement ?
[code]
...
var example = $('#example').dataTable({
"sScrollY": "200px",
"bJQueryUI": true,
"bPaginate": false,
"bScrollCollapse": true,
"aaSorting": [[0, "asc"]]
});
[/code]