Scroller and pagination for Bootstrap4 version

Scroller and pagination for Bootstrap4 version

ScyzorScyzor 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.

Answers

  • ScyzorScyzor Posts: 19Questions: 5Answers: 0
    edited May 2019

    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

  • ScyzorScyzor Posts: 19Questions: 5Answers: 0
    edited May 2019

    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.

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

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

    Kevin

  • ScyzorScyzor Posts: 19Questions: 5Answers: 0
    edited May 2019

    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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • ScyzorScyzor Posts: 19Questions: 5Answers: 0
    edited May 2019

    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!

  • ScyzorScyzor Posts: 19Questions: 5Answers: 0

    Also vertical scroll issue is noticeable when rows sizes are random

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • ScyzorScyzor Posts: 19Questions: 5Answers: 0

    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?

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

This discussion has been closed.