Setting Column Width Has No Effect

mrtomd

I start with an empty table html tag. I bring in data as a js array via an $.ajax request. Upon "success" of that request, I build the datatable. I explicitly set the column names and widths but there is no effect on the column widths unless I set the CSS of the table to "table-layout: fixed", which makes everything else look horrible (but the column finally has the desired width).

I'm styling with Bootstrap and I don't think I'm using any options that aren't compatible.

Here's the code.

Note:
- First row of data array from ajax request is the column titles.
- The 'columns' function is working properly.

$.ajax({
    url : "data/data.js",
    dataType : 'script',
    success : function() {
        table = $('#table1').DataTable({
            columns: columns(data[0]),
            data: rows(data),
            autoWidth: false,
            order: [[2,'desc'],[0,'asc']],
            scrollX: true,
            pageLength: 5,
            fixedColumns: {leftColumns: 1},
            fixedHeader: false
        });
       }
});

function columns(arr){
    var temp = [];
    arr.forEach(function(d,i){
        temp[i] = {};
        temp[i].title = d;
        if(d.toLowerCase()=='uds remarks') temp[i].width = "20%";
        if(d.split(' ')[d.split(' ').length-1].toLowerCase()=='date') temp[i].type = 'date';
    });
    return temp;
}
function rows(arr){
    var temp = [];
    for(i=1;i<(arr.length);i++){
        temp.push(arr[i]);
    }
    return temp;
}

allan

Happy to take a look at the page if you link to it please. I'd suggest removing the autoWidth option as well if you have scrolling enabled.

Allan

mrtomd

I removed the autoWidth and set the width = "##px" instead of "##%" and it worked. Thanks.