Question

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 complete. 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

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 completes
    //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().