Buttons in first column do not scroll with table, z-index problems in IE7

robertbrower

I am putting a button in the column at index 0 of my data table. The column at index 1 is hidden using aoColumnDefs options. The table is loaded via ajax, then the buttons are initialized, then the data table is initialized. It looks fine in IE8 and FF, but when I use compatibility mode (IE7), the buttons do not scroll with the table body and they appear over the bottom toolbar of the datatable. I initialize the buttons just before the data table. Here's my code:

[code]
var initializeDataTable = function ($this, settings, $table) {

$table.find("button.add").button({
text: false,
icons: {
primary: "ui-icon-plusthick"
}
}).click(function (event) {
var $tr = $(this).parent().parent();
// TODO: Implement add feature...
return false;
});


settings.$recipeDataTable = $table.dataTable({
"bJQueryUI": true
, "sPaginationType": "full_numbers"
, "sScrollY": "0px"
, "aoColumnDefs": [
{
"aTargets": [0]
, "bSearchable": false
}
,{
"aTargets": [1]
, "bSearchable": false
, "bVisible": false
}
, {
"aTargets": [2, 5]
, "bSearchable": true
, "fnRender": function (obj) {

var html = "";
if (obj.aData[obj.iDataColumn].length > 18) {
html = "" + obj.aData[obj.iDataColumn].substring(0, 15) + "...";
} else {
html = obj.aData[obj.iDataColumn];
}

return html;
}
, "bUseRendered": false
}
]
, "aaSorting": [[1, "asc"]]
});

settings.$pageCenter.resizeAll();
};
[/code]

How can i fix this? Thank you!

Robert

robertbrower

It appears as though it is the jQuery UI button plugin which is causing the buttons to not scroll with the scroll body. When I comment out the line beginning with $table.find("button.add").button({ ... I get normal buttons which scroll ok with the table body. I still want to use the jQuery UI button plugin on the visible buttons. Is there a way? I was thinking I should use fnDrawCallback but I am not sure.

robertbrower

This is my latest script. IE7 seems to have a problem making the jquery ui buttons in the first column of my datatable scroll with the scroll body. I hope someone can help. Thanks a bunch.
[code]
var initializeDataTable = function ($this, settings, $table) {

settings.$recipeDataTable = $table.dataTable({
"bJQueryUI": true
, "sPaginationType": "full_numbers"
, "sScrollY": "0px"
, "aoColumnDefs": [
{
"aTargets": [0]
, "bSearchable": false
, "bSortable": false
}
, {
"aTargets": [1, 4]
, "bSearchable": true
, "fnRender": function (obj) {
var html = "";
if (obj.aData[obj.iDataColumn].length > 18) {
html = "" + obj.aData[obj.iDataColumn].substring(0, 15) + "...";
} else {
html = obj.aData[obj.iDataColumn];
}

return html;
}
, "bUseRendered": false
}
]
, "aaSorting": [[1, "asc"]]
, "fnDrawCallback": function (oSettings) {
$(oSettings.nTBody).find("button.add").button({
text: false,
icons: {
primary: "ui-icon-plusthick"
}
}).click(function (event) {
var machineId = settings.machineId;
var recipeId = $(this).val();
var results = $.grep(settings.recipes, function (obj, i) {
return obj.MachineId == machineId && obj.RecipeId == recipeId;
});

if (results.length > 0) {
alert("The recipe has already been added.");
return false;
}

settings.recipes.push({
MachineId: machineId
, RecipeId: recipeId
})

return false;
});
}
});

settings.$pageCenter.resizeAll();
};
[/code]

robertbrower

After a lot of digging I found a workaround:
[code]
/* workaround for ui buttons not scrolling with datatable in IE7 */
.dataTables_scrollBody { position: relative; }
[/code]

aroehrig

Thank you Robert for sharing your solution, i got the same weird problem when customizing my css... You save me a lot of time !