Scroller and pagination for Bootstrap4 version

Scyzor

When I will initiate DataTable as

        var table = $('#logs').DataTable({
            "paging": true,
            "scroller": true
        });

pagination will be gone as well horizontal scroller is not displayed for DataTable Bootstrap4 version.

Scyzor

Never mind - it should be "scorllX" but with it

$('#datatableId tfoot tr').appendTo('#datatableId thead');

doesn't work to move search boxes to the table header

Scyzor

I'm not if solution like this:

$('#databaseId').wrap('<div class="scrollable"></div>');

with CSS

.scrollable {
    overflow-x: scroll;
}

is good solution in this case but can't get Scroller to work when Individual column searching got moved to the header.

kthorngren

Here is an example of header search inputs with scrollX:
http://live.datatables.net/cedayopa/1/edit

Kevin

Scyzor

Interesting solution but when I will use it header columns width are off compared to the data columns width when data columns are narrower or wider than header columns.

Also it looks Firefox has problems to render 50+ data when scroller is enabled

colin

Hi @Scyzor ,

Could you modify Kevin's example to demonstrate those two issues, please. It would help us to understand what you're seeing,

Cheers,

Colin

Scyzor

Hi @colin

I have tried to recreate it here: http://live.datatables.net/viwaqega/2/edit

You need to load it in FireFox and then just reload with Output window open to see columns shifted (that problem is most important for me)

Rendering issues with 50+ records and fast vertical scroll is random. Probably you will need to have more text to display to have it continuous.

Thanks for any help!

Scyzor

Also vertical scroll issue is noticeable when rows sizes are random

allan

Right - the problem here is that the column widths are being altered by inserting the input elements after DataTables has done its column width calculations. You could call columns.adjust() after you create the inputs: http://live.datatables.net/viwaqega/3/edit .

Another option would be to assign a width of 100% to the input elements so they auto fit rather than force fit.

Allan

Scyzor

OK. I have set columns width.

Is there any way to prevent rendering issues on FireFox with 50+ more columns or this is FF problem?

colin

Hi @Scyzor ,

Could you link to a page or create a test case that shows that 50+ column FF issue, please. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin