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

afarberafarber Posts: 53Questions: 0Answers: 0
edited April 2012 in General
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

Replies

  • allanallan Posts: 63,542Questions: 1Answers: 10,476 Site admin
    Hi Alex,

    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
  • afarberafarber Posts: 53Questions: 0Answers: 0
    Thank you Allan, this has worked well.

    I've donated USD 10,- for your awesome piece of software.
  • allanallan Posts: 63,542Questions: 1Answers: 10,476 Site admin
    Thanks very much for the donation :-). Good to hear that did the job for you.

    Allan
This discussion has been closed.