Scroller and pagination for Bootstrap4 version
Scroller and pagination for Bootstrap4 version
Scyzor
Posts: 19Questions: 5Answers: 0
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.
This discussion has been closed.
Answers
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
I'm not if solution like this:
$('#databaseId').wrap('<div class="scrollable"></div>');with CSS
is good solution in this case but can't get Scroller to work when Individual column searching got moved to the header.
Here is an example of header search inputs with scrollX:
http://live.datatables.net/cedayopa/1/edit
Kevin
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
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
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!
Also vertical scroll issue is noticeable when rows sizes are random
Right - the problem here is that the column widths are being altered by inserting the
inputelements after DataTables has done its column width calculations. You could callcolumns.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
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?
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