I have a data table that is initially empty and is populated after a particular Javascript call. After the data is inserted into the table, I'd like to center all of the data in one of the columns. I tried specifying this at the initialization step in this way:

dTable = $('#dt').datatable({ 'aoColumns': [ null, null, { "sClass" : "center" }] });

The data in the third column was not centered after the insertions were plete. I tried modifying aoColumns after the insertions and redrawing the table as well:

dTable.fnSettings().aoColumns[2].sClass = "center";
dTable.fnDraw();

This did not work either. So my question is simply how should I go about telling the data table to center the data in the third column?

Thanks in advance for your suggestions.

Chris

I have a data table that is initially empty and is populated after a particular Javascript call. After the data is inserted into the table, I'd like to center all of the data in one of the columns. I tried specifying this at the initialization step in this way:

dTable = $('#dt').datatable({ 'aoColumns': [ null, null, { "sClass" : "center" }] });

The data in the third column was not centered after the insertions were plete. I tried modifying aoColumns after the insertions and redrawing the table as well:

dTable.fnSettings().aoColumns[2].sClass = "center";
dTable.fnDraw();

This did not work either. So my question is simply how should I go about telling the data table to center the data in the third column?

Thanks in advance for your suggestions.

Chris

• javascript
• jquery
• jquery-ui
• datatable

• I would remend using Firebug to inspect the table cells to find out what styles are being applied. Perhaps something is being overridden? – Favio Commented May 17, 2010 at 4:39
• @fudgey, I tried using CSS initially as well but to no avail. Each time I add a row, I'm using a dTable.fnAddRow(r) call to add the data in array r. Poking around with Firebug as Favio suggested, you see that the table body has a particular structure set up by the datatable plug-in to support various actions. I could probably use CSS to fix the issue given what I've seen of the structure but that is far from elegant. There's got to be a better way. – Chris Commented May 17, 2010 at 20:44

1 Answer 1

If I understand you correctly, your table gets multiple rows with multiple columns from AJAX data. The third column should be centered. Try this out:

$.ajax({
  url: 'ajax/test.html',
  success: function(data) { //after AJAX pletes
    //fill the table.
    $('#dt').children('tr').each(function(){ //for each row
      $(this).children('td').eq(2).attr('align', 'center');  //center the third column.
    });
  }
});

Alternatively, if you don't like using the attributes, you could set the style attribute using .attr(attributeName, value) or using .css( propertyName, value ), or add a class with .addClass().