nowrap for Ajax table

jason

Hi All,

Can someone give me an example of how to add a nowrap="nowrap" to a column when all information is generated on the fly for an ajax table?

[code]
$('#results').dataTable({
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
$(nRow).attr('id', aData[0]);
return nRow;
},
"bAutoWidth": false,
"sPaginationType": "full_numbers",
"bProcessing": true,
"sAjaxSource": 'ajax/purchasers.php',
"aaSorting": [[1,'asc']],
"aoColumns": [
{ "bVisible": false },
null,
null,
null,
null,
null,
null,
null
]
});
[/code]

Thanks in advance.

allan

If you use fnInitComplete ( http://datatables.net/usage/callbacks#fnInitComplete ) and then loop over all the elements in the table ( fnGetNodes() ) you can do whatever you want to them - including adding nowrap.

Allan

jason

Thank-you @allen. Worked beautifully. If anyone is interested this allen's solution allowed me to implement a solution in seconds like so:

[code]
$('#results').dataTable({
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
$(nRow).attr('id', aData[0]);
return nRow;
},
"fnInitComplete": function() {
$('#results tbody tr').each(function(){
$(this).find('td:eq(0)').attr('nowrap', 'nowrap');
});
},
"bAutoWidth": false,
"sPaginationType": "full_numbers",
"bProcessing": true,
"sAjaxSource": 'ajax/purchasers.php',
"aaSorting": [[1,'asc']],
"aoColumns": [
{ "bVisible": false }, //id
null,
{ "bVisible": false }, //url
null,
null,
null,
null,
null
]
});[/code]

jneilliii

You could also do this in your row callback function. An example is shown below.

[code]
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
$('td', nRow).attr('nowrap','nowrap');
return nRow;
}
[/code]

and for those looking to really compress the table, you can wrap the cell contents in a div and set the width to match the headers width set by the aoColumns sWidth property like this. Here we have to loop through all the cells with a function so we know the position of the cell to be able to get the width property of the header row.

[code]
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
$('td', nRow).each(function (iPosition){
var sCellContent = $(this).html();
sCellContent = '' + sCellContent + '';
$(this).html(sCellContent);
});
return nRow;
}
[/code]