Datatables: disable column resizing after filtering

Question

I am using datatables and I populate the table with data using javascript. It works fine but I would like to prevent datables from resizing the table's column width after filtering. I have tried several solutions found on the web but it does not seem to solve the issue.

My HTML is:

<table class="table table-striped table-bordered table-hover" id="id-table" width="100%"></table>

I instantiate the table like:

var table = $('#id-table').DataTable(
        {
            paging:     false,
            ordering:   false,
            info:       false,
            "bAutoWidth": false, // Disable the auto width calculation : false,
            columns:  columns,
            data :    assignments,
            sScrollX: "100%",
            // aoColumns :  aoColumns
  //           aoColumns : [ 
  //   { "sWidth": "150px" },
  //   { "sWidth": "150px" },
  //   { "sWidth": "150px" },
  //   { "sWidth": "150px" },
  //   { "sWidth": "150px" },
  //   { "sWidth": "150px" },
  //   { "sWidth": "150px" },
  //   { "sWidth": "150px" },
  //   { "sWidth": "150px" },
  //   { "sWidth": "150px" },
  //   { "sWidth": "150px" },
  //   { "sWidth": "150px" }
  // ]

            // aoColumns: aoColumns
           // columnDefs : cdefs
        }
    );

where data is an array with the data and columns is an array of objects such as:

bSearchable false
sTitle "Column Title"
sWidth "100px"
title "Column Title"
mRender function(data, type, full, meta)
render function(data, type, full, meta)

I have tried setting the width in both "columns" directly and using the "aoColumns" options (commented out in the code above). In both cases, columns widths still get resized after filtering. Any idea on how I can disable this auto-resizing?

Answer 1

In your html table tag set style table-layout to 'fixed' and pass bAutoWidth = false to datatable function