Switched from DOM to AJAX (and fnRender) and all columns have same width
Switched from DOM to AJAX (and fnRender) and all columns have same width
Hello,
I have switched from using DOM to AJAX and suddenly all columns have same width. I've tried changing bAutoWidth and bDeferRenderer but this hasn't helped. Do I have to hardcode the widths in sWidth's now?
My webpage is: http://preferans.de/top20.php
Debug token is: iyoket
My code is:
[code]
function renderPos (obj) {
return obj.aData[1] + '.';
}
function renderStatus (obj) {
var status = obj.aData[2] ? 'happy_' : 'offline_';
var gender = obj.aData[3] ? 'female_' : 'male_';
return '';
}
function renderName (obj) {
var id = obj.aData[0];
var url = '/user.php?id=' + id;
var name = obj.aData[4];
var key = id.substr(0, 2);
var medals = obj.aData[5];
var images = ' ';
for (var i = 0; i < medals; i++)
images += '';
return '' + name + '' + images;
}
function renderMoney (obj) {
var money = obj.aData[7];
var color = money >= 0 ? '006600' : 'CC0000';
return '' + money + '$';
}
$(function() {
$('#rating').dataTable( {
bJQueryUI: true,
sPaginationType: 'full_numbers',
bProcessing: true,
bDeferRender: true,
sAjaxSource: '/top-json.php',
aaSorting: [[1, 'asc']],
aoColumns: [
/* 0: id */ { bSearchable: false, bSortable: false, bVisible: false },
/* 1: pos */ { bSearchable: false, fnRender: renderPos },
/* 2: online */ { bSearchable: false, bSortable: false, fnRender: renderStatus },
/* 3: female */ { bSearchable: false, bSortable: false, bVisible: false },
/* 4: name */ { fnRender: renderName },
/* 5: medals */ { bSearchable: false, bSortable: false, bVisible: false },
/* 6: city */ null,
/* 7: money */ { bSearchable: false, bSortable: false, fnRender: renderMoney }
]
} );
} );
[/code]
Thank you for any hints
Alex
I have switched from using DOM to AJAX and suddenly all columns have same width. I've tried changing bAutoWidth and bDeferRenderer but this hasn't helped. Do I have to hardcode the widths in sWidth's now?
My webpage is: http://preferans.de/top20.php
Debug token is: iyoket
My code is:
[code]
function renderPos (obj) {
return obj.aData[1] + '.';
}
function renderStatus (obj) {
var status = obj.aData[2] ? 'happy_' : 'offline_';
var gender = obj.aData[3] ? 'female_' : 'male_';
return '';
}
function renderName (obj) {
var id = obj.aData[0];
var url = '/user.php?id=' + id;
var name = obj.aData[4];
var key = id.substr(0, 2);
var medals = obj.aData[5];
var images = ' ';
for (var i = 0; i < medals; i++)
images += '';
return '' + name + '' + images;
}
function renderMoney (obj) {
var money = obj.aData[7];
var color = money >= 0 ? '006600' : 'CC0000';
return '' + money + '$';
}
$(function() {
$('#rating').dataTable( {
bJQueryUI: true,
sPaginationType: 'full_numbers',
bProcessing: true,
bDeferRender: true,
sAjaxSource: '/top-json.php',
aaSorting: [[1, 'asc']],
aoColumns: [
/* 0: id */ { bSearchable: false, bSortable: false, bVisible: false },
/* 1: pos */ { bSearchable: false, fnRender: renderPos },
/* 2: online */ { bSearchable: false, bSortable: false, fnRender: renderStatus },
/* 3: female */ { bSearchable: false, bSortable: false, bVisible: false },
/* 4: name */ { fnRender: renderName },
/* 5: medals */ { bSearchable: false, bSortable: false, bVisible: false },
/* 6: city */ null,
/* 7: money */ { bSearchable: false, bSortable: false, fnRender: renderMoney }
]
} );
} );
[/code]
Thank you for any hints
Alex
This discussion has been closed.
Replies
The reason for this is that the column width is calculated before the data is loaded - thinking about it this seems a bit wrong - I shall investigate further.
Until then what you can do is add:
[code]
fnInitComplete: function () {
this.fnAdjustColumnSizing();
}
[/code]
And that should allow it to work as expected.
Allan
I've donated USD 10,- for your awesome piece of software.
Allan