fnAddData and column width

cfilkins

In short, I have an empty table defined in HTML. I've initialized my dataTable in javascript. My data is coming in from an ajax source, but needs to be manipulated prior to going into the dataTable, so a separate function handles data acquisition and manipulation, and stores the data for the table in an object. I then use fnAddData to push the data into the dataTable.

I need to constrain the width of one of the columns, and have the text not wrapped but truncated with ellipsis. Unfortunately, it appears that I can either wrap the text, or have an absurdly wide column, as using fnAddData appears to ignore any column width settings, both in the HTML table definition as well as in the dataTable initialization.

HTML -
[code]




CourseID
Title
LoginName
SourceID
UserName
Average Course Logins
Average Link Interactions
Average Page Interactions
Average Forum Interactions
Average Forum Posts
Average Forum Replies
Average Dropbox Interactions
Average Assessment Interactions
Average Total Points Earned
Average Calculated Final Grade



[/code]

dataTable initialization -
[code]
oSummaryTable = $('#table-summaryreport').dataTable( {
'bPaginate': true,
'bAutoWidth': false,
'iDisplayLength': 20,
'bFilter': false,
'bSort': true,
'sDom': '<"clear"><"top"iT>rt<"bottom"lp>',
'aLengthMenu': [[20,10,50,-1], [20,10,50,'All']],
'bProcessing': true,
'oTableTools': {
'aButtons': ['copy', 'csv']
},
'aoColumns' : [
{'sClass': 'center', //create an extra column to hold the checkboxes'
'bSortable': false, //disable sorting on this column
'mData': 'course_id', //grab the info from the course_id data
'mRender': function(data,type,full){ //and build a checkbox with a value =
return '';}},
{'mData' : 'course_id'},
{'mData' : 'title',
'sWidth' : '150px'},
{'mData' : 'loginname', //hide this column in the summary table
'bVisible':false},
{'mData' : 'sourceid', //hide this column in the summary table
'bVisible':false},
{'mData' : 'username', //hide this column in the summary table
'bVisible':false},
{'mData' : 'Course Logins'},
{'mData' : 'Link Interactions'},
{'mData' : 'Page Interactions'},
{'mData' : 'Forum Interactions'},
{'mData' : 'Forum Posts'},
{'mData' : 'Forum Replies'},
{'mData' : 'Dropbox Interactions'},
{'mData' : 'Assessment Interactions'},
{'mData' : 'Total Points Earned'},
{'mData' : 'Calculated Final Grade'}],
'fnRowCallback':function(nRow, aData, iDisplayIndex, iDisplayIndexFull){ //after building each row, go back and update the cells
$('td:eq(1)',nRow).attr('id', aData.course_id).attr('class','SARcourseid').attr('title','Click on the CourseID to view a detailed activity report.'); //define the id for the course_id cell =
$(':checkbox',nRow).attr('id', iDisplayIndexFull); //give the checkbox an ID corresponding with the row index
$('td:eq(2)',nRow).attr('class','SARtitle'); //insert the class=SARtitle on the title cells
return nRow;
}
});
[/code]

Pushing data into the table -
[code]
oSummaryTable.fnAddData(oAverages);
[/code]