DataTables scrollX causing extra space at far right side

coolboyjules

Hi everyone,

I'm wondering if anyone knows how to fix this? When I add scrollX:true to add horizontal scrolling, there's a large empty space as shown in the picture attached. My config is this:

 $(document)
            .ready(function() {
                $('#ajax_ci_table')
                    .dataTable({
                        processing: true,
                        serverSide: true,
                        pagination:false,
                        filter: true,
                        orderMulti: false,
                        dom: 'tir', // just disable the search box because we have the custom filtering.
                        ajax: {
                            url: "/Home/CallableIncomeAjax",
                            type: "POST",
                            data: function(data) { return data = JSON.stringify(data); },
                            contentType: "application/json; charset=utf-8"
                        },
                        scrollX:true,
                        deferRender: true,
                        scrollY: 350,
                        scroller: {
                            loadingIndicator: true
                        },
                        initComplete: function() {
                            var api = this.api();
                            var settings = this.fnSettings();

                            api.columns()
                                .indexes()
                                .flatten()
                                .each(function(i) {
                                    var renderFunction = settings.aoColumns[i]["mRender"];
                                    //.aoColumns[i]["mRender"];
                                    var column = api.column(i);
                                    var select = $('<select><option value=""></option></select>')
                                        .appendTo($(column.footer()).empty())
                                        .on('change',
                                            function() {
                                                column
                                                    .search(this.value)
                                                    .draw();
                                            });

                                    column.data()
                                        .unique()
                                        .sort()
                                        .each(function(d) {
                                            if (renderFunction == null) {
                                                select.append('<option value="' + d + '">' + d + '</option>');
                                            } else {
                                                select
                                                    .append('<option value="' +
                                                        d +
                                                        '">' +
                                                        renderFunction(d, 'display', null) +
                                                        '</option>');
                                            }
                                        });
                                });
                        },

If I disable scrollX:true, I get no space (the table fully fills the port), but the headers are misaligned when the user scrolls.

coolboyjules

Thanks for your help!!

allan

If you don't already have it, add style="width:100%" to your table HTML tag.

If you do have that already, please link to a test case (per the forum rules :-) ) so I can help to debug it.

Allan

coolboyjules

Thanks Allan! That was perfect Now my table is great!