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

bayeni

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)

allan

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

Allan

bayeni

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

allan

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

bayeni

The debug information I created can't help?

bayeni

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.

bayeni

http://live.datatables.net/faxowoze/1/

allan

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

bayeni

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.

allan

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

bayeni

how can I add bootstrap to the test case?

allan

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

Allan

bayeni

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.

allan

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

bayeni

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?

allan

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

bayeni

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.

allan

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.

bayeni

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

allan

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

bayeni

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.

bayeni

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

allan

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

bayeni

no problem, January is really good. Thanks!