ajax datatable doesn't resize?

itzdarkoutthere

I just implemented my first ajax datatable and it is getting set with an explicit width when the page loads, so it cannot resize if browser size changes. Which is really odd, because this ajax datatable example resizes: https://www.datatables.net/examples/data_sources/ajax.html
If i remove the ajax option from my datatable, it doesn't get set with an explicit width and resizes fine. I have a bunch of non-ajax datatables and they resize fine as well.

Here is the relevant code for my ajax table: (I wish I could create a fiddle, or some example to look at, but that is just not going to be possible at this time).

    var availableTable = initDataTable('#available-users-table', {
        ajax:{
            type: 'GET',
            dataSrc: '',
            url: './ajax/getUsersNotInGroupId?GroupId=',
            error: function(jqXHR, status, error) {
                ajaxError(jqXHR, status, error,'Error occurred while getting available users');
            }
        },
        columns: [
            { data: 'id' },
            { data: 'firstName' },
            { data: 'lastName' }
        ],
        sDom: "t<'row'<'col-sm-8'p><'col-sm-4 text-right'l>>",
        "pagingType": 'simple',
        select:true,
        "order": [[ 1, 'asc' ]]
    });

*all of my datatables use this utility function
/
* inits a datatable with default options
* @param selector - (required) jquery table selector; $("#myTable")
* @param options - (optional) datatable options, any options defined here will override the default options; {"order": [[ 3, "desc" ]]}
*/
function initDataTable(selector, options) {

//init datatable
var table = $(selector).DataTable($.extend(true, {
    sDom: "t<'row'<'col-sm-3'i><'col-sm-6 text-center'p><'col-sm-3 text-right'l>>",
    "pagingType": 'full_numbers'
}, options || {}));

//init tooltips (needed here due to the way datatables handles paging)
table.$('span[data-toggle="tooltip"]').each(function() {
    $(this).tooltip();
});

//init filter
$(selector+"-filter").on("keyup", function(){
    table.search($(this).val()).draw();
});

return table;

}

                <div class="col-xs-6">
                    <div class="input-group">
                        <span class="input-group-addon">Filter</span>
                        <input id="available-users-table-filter" type="text" class="form-control" placeholder="Type here...">
                    </div>
                    <table id="available-users-table" class="table table-bordered table-hover table-striped table-responsive">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>ID</td>
                            <td>First Name</td>
                            <td>Last Name</td>
                        </tr>
                        </tbody>
                    </table>
                </div>

Ashbjorn

@itzdarkoutthere, some general thoughts:

• Is the data inside the table resizable? Meaning it has whitespace to break on?
• Are you perhaps using CSS that set's white-space: nowrap ?
• Are you able to reproduce the issue with a JSFiddle or using http://live.datatables.net?
• Are you sure vertical scrolling is not enabled?
• Also make sure your table element has width: 100% or width="100% otherwise no re-calculations will happen

Perhaps you can change your Ajax source into a simple JSON file and have that uploaded somewhere so you can reference it from your examples, or take an excerpt from it (perhaps first page of data) if that is enough to demonstrate the problem.

itzdarkoutthere

The table element itself is getting set somehow with style="width:785px" after datatable initialization. (that is just an example size, it initializes to fill the entire container no matter the size) That is what is preventing the resizing. If i remove the ajax property the width doesn't get explicitly set, and it resizes fine. If i use chrome developer tools to blow away the explicitly set width, it resizes fine.
All of my other datatables are set up with the same classes as the one above, literally, the only difference is the data is loaded into html via jsp each function.

I'd love to post a fiddle, I just don't have the time at the moment. Maybe if I can't figure it out on my own tomorrow, I'll set one up. At this point though it's probably a better use of my time to scrap the ajax property and just use jquery to get the data then load and remove data manually after the tabe is initialized. I suppose another option would be to clear the table element style attribute after datatables is initialized/draw. But I'd really like to have this working without some funky workaround, or it will bug me forever.

Mostly, I am hoping someone else is familiar with this issue, even though scouring this website, stackoverflow, and google didn't turn up anything at all.

allan

Can you try adding either width="100%" or style="width:100%" to your table element please.

Its virtually impossible for DataTables to get a percentage value for the width from a stylesheet, which is why it needs to be on the element.

Allan

itzdarkoutthere

Thanks, Ashbjorn and allan. Setting width="100%" or style="width:100%" did fix it. I was being stubborn, because I didn't think that would fix it for some reason and it doesn't feel right to me to do that when I'm so used to having all styling in css.

I guess it just doesn't make sense to me why it is needed when there are 3 other datatables on the site that I am building that do not have either property, and they resize no problem.

allan

for some reason and it doesn't feel right to me

Yup - I feel that way every time I put it in as well. Unfortunately there just isn't any other practical way for DataTables to know that the width applied to it is a percentage value.

I'm surprised the others work without it :-)

Allan