How to get vertical Page fitting with dataTables.pageResize.js

How to get vertical Page fitting with dataTables.pageResize.js

bayenibayeni Posts: 57Questions: 8Answers: 0

I load the dataTables.pageResize.min.js in my application and I use:

var table = $('#companyTable').DataTable( {
    ...
    paging: true,
    pageLength: 100,
    lengthMenu: [ 50, 100, 200, 500, 1000 ],
    pageResize: true,
    scrollX: "100%",
    ...
})

as I understood that are all requirements to use that plugin (the necessary object for the event seems to be created in dataTables.pageResize.min.js). I deleted scrollY: 550, but the table is shown much to long without a scrollbar and I have a scrollbar on my page.
(Debug information alukil)

Answers

  • allanallan Posts: 61,438Questions: 1Answers: 10,050 Site admin

    Can yo link to a test page showing the issue please.

    Allan

  • bayenibayeni Posts: 57Questions: 8Answers: 0

    no sorry, it is not connected to the internet, it is only an internal application

  • allanallan Posts: 61,438Questions: 1Answers: 10,050 Site admin

    I'm afraid there is little help I can offer in that case since I can't debug the issue. Perhaps you could use http://live.datatables.net , JSFiddle or CodePen to create a test page showing the issue.

    Thanks,
    Allan

  • bayenibayeni Posts: 57Questions: 8Answers: 0

    The debug information I created can't help?

  • bayenibayeni Posts: 57Questions: 8Answers: 0

    How can I save the test? If I extend the JavaScript to:

    $(document).ready( function () {
      var table = $('#example').DataTable(
                paging: true,
                pageLength: 100,
                lengthMenu: [ 50, 100, 200, 500, 1000 ],
                pageResize: true,
                scrollX: "100%",
      );
    } );
    

    I have the same effect, The table content scrolls out of the window.

  • allanallan Posts: 61,438Questions: 1Answers: 10,050 Site admin

    Thanks for the link - but I'm getting a syntax error in the Javascript and it doesn't appear to include the page resize plug-in code.

    Fixing those errors and adding a container that defines the high and it seems to work as expected for me: http://live.datatables.net/faxowoze/2/edit .

    Allan

  • bayenibayeni Posts: 57Questions: 8Answers: 0

    ok, with this example I understand how to use it, thanks. I see that the number of table entries changes ("Showing 1 to 14 of 57 entries") with resizing in this example. Is it only usable without a pageLength and lengthMenu because with the resize the page size changes? I expected that it will cause a scrollbar, if pageLength is used and the number of rows don't fit to the page.

    And in my application I have the problem, if I add around my table a container, I miss the header of the table:
    javascript:

            $('#content').html('<div class="tablecontainer">'+table+'</div>');
    

    css:

    div.tablecontainer {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    

    Mabye it is the same problem with bootstrap header as with bootstrap footer, because it seems to collidate with bootstrap footer, too. The footer is always over the buttons on the bottom of the page with this vertical filling. The resize only works 2 times, after that it seems to be confused.
    If I try the container around everything in the body, it seems to be confused, too.
    So the example works, but embedding it in a bootstrap page seems to be not easy, at the moment I didn't find a working solution.

  • allanallan Posts: 61,438Questions: 1Answers: 10,050 Site admin

    Is it only usable without a pageLength and lengthMenu because with the resize the page size changes?

    Correct. The plug-in controls the page length - or rather the page length is defined by the available height.

    if I add around my table a container, I miss the header of the table: javascript:

    We'd need a test case showing the issue so it can be debugged please.

    Allan

  • bayenibayeni Posts: 57Questions: 8Answers: 0

    how can I add bootstrap to the test case?

  • allanallan Posts: 61,438Questions: 1Answers: 10,050 Site admin

    Easiest way is probably to use the download builder and include Bootstrap.

    Allan

  • bayenibayeni Posts: 57Questions: 8Answers: 0

    This seems to be a misunderstanding, I have and use bootstrap, but I don't know how to add it on http://live.datatables.net, because I only can find predefined things of dataTable under "Add Library". Maybe I should use it remote from maxcdn.bootstrapcdn.com, I will try that.

  • allanallan Posts: 61,438Questions: 1Answers: 10,050 Site admin

    You could just use the URL's from the download builder when you select the Bootstrap option. Copy and paste them into the demo page - e.g.: http://live.datatables.net/weqizeta/1/edit

    Allan

  • bayenibayeni Posts: 57Questions: 8Answers: 0

    I found out that it seems to collidate with bootstrap class="row". If it isn't in the div it works, but with this class it don't work correctly.
    Example http://live.datatables.net/faxowoze/20/edit
    Is it possible to use vertical page fitting with pageLength and lengthMenu to get a scroll bar and not changing the number of pages, because pageLength ist set?

  • allanallan Posts: 61,438Questions: 1Answers: 10,050 Site admin

    The whole point of the pageResize plug-in is that it will change the page length dynamically to fit the container. That is incompatible with giving the user the ability to set a page size (two different things trying to do the same thing).

    Allan

  • bayenibayeni Posts: 57Questions: 8Answers: 0

    But without page size but bootstrap class="row" there is a problem, too. After resize it fits not anymore to my screen. The table is longer than and for each resize it will become longer and the scrollbar of the page grows.

  • allanallan Posts: 61,438Questions: 1Answers: 10,050 Site admin

    If you don't include page resize, then no, it won't automatically resize.

    The table is longer than and for each resize it will become longer and the scrollbar of the page grows.

    Please link to a test case showing the issue.

  • bayenibayeni Posts: 57Questions: 8Answers: 0

    The test case is the one from above http://live.datatables.net/faxowoze/20/edit

  • allanallan Posts: 61,438Questions: 1Answers: 10,050 Site admin

    I'm not able to reproduce that error with that link I'm afraid. Is there a specific browser and version you are seeing that error with?

    When I resize the output window the table correctly resizes and don't not grow forever as you describe.

    Allan

  • bayenibayeni Posts: 57Questions: 8Answers: 0

    oh, I didn't check different browsers. Now I tried with Internet Explorer, with that I don't have problems, too. Normally we are using Firefox and I have 42.0, with this I have the problem.

  • bayenibayeni Posts: 57Questions: 8Answers: 0

    I updated to Firefox 43.0.1 now, but it is the same behaviour.

  • allanallan Posts: 61,438Questions: 1Answers: 10,050 Site admin

    Ah yes, I see the issue in Firefox. I'll try to take a look into it soon, although likely it will be January before I can do so now.

    Allan

  • bayenibayeni Posts: 57Questions: 8Answers: 0

    no problem, January is really good. Thanks!

This discussion has been closed.