nowrap for Ajax table

nowrap for Ajax table

jasonjason Posts: 2Questions: 0Answers: 0
edited February 2010 in General
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.

Replies

  • allanallan Posts: 63,407Questions: 1Answers: 10,452 Site admin
    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
  • jasonjason Posts: 2Questions: 0Answers: 0
    edited February 2010
    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]
  • jneilliiijneilliii Posts: 15Questions: 0Answers: 0
    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]
This discussion has been closed.