Question

I am new to the DataTables plugin,
How does it determine the number of columns to display?
Based on the HTML table? or based on the DataSource?
Or is it some combination of the two ?

Can I have columns in the DataSource that are not rendered as columns?
(but are used for example as a tooltip on another column) ?

Answer 1

How does it determine the number of columns to display?

The answer really depends on how you configure your table (keep reading to see what I mean).

Based on the HTML table? or based on the DataSource? Or is it some combination of the two ?

If you create a DOM based HTML table with all of your data already in it, then you can see from the zero configuration example that it will just display all of your columns that are provided.

Can I have columns in the DataSource that are not rendered as columns? (but are used for example as a tooltip on another column) ?

You can further configure the table to hide certain columns using the bVisible parameter in the aoColumnDefs or aoColumns settings for the table configuration. See this example for how to hide columns.

You can then use mrender to render a column in a particular way.

Say your data had two columns, ID and Name and you wanted to have Name be displayed but only show the ID as a tooltip when the user mouses over the Name cell. In your aoColumns object, set bVisible to false for the ID column and set mrender for the Name column as follows:

"mrender": function(data, type, full) {
    return '<span title="' + full.ID + '">' + data + '</span>';
}

Note that if you’re using a data source other than the data embedded in the DOM at load (such as AJAX) you’re going to probably want to also specify the mdata parameter for each aoColumns definition, as can be seen in this example.

Best of luck!