jQuery DataTables: How to Force Specific Column Widths

I’ve mentioned the wonderful jQuery plugin DataTables a number of times before, the awesome little trick that instantly transforms any HTML table fed to it into a fully sortable, paginated, searchable and zebra-striped table, requiring the most minimum of coding to implement.

Today’s tip looks at how you can specify what column widths to use in your DataTables implementation, instead of relying on the default auto column widths assigned by the plugin.

Firstly, you need to turn off DataTable’s built in auto column width calculator by feeding it a false value for the bAutoWidth switch when initialising your DataTable object. Next, you need to feed the column widths you wish to use directly into the initialization by means of the aoColumns definitions, making use of the sWidth switch to specify the width.

Looking at this in code, you should now have:

$('#activitylog').dataTable( {
"bAutoWidth": false,
"aoColumns": [{"sWidth":"60%"},{"sWidth":"20%"},{"sWidth":"20%"}]
} );

Nifty.

Related Link: http://datatables.net/