Problem initializing pageLength with user preference

TomBajzek

I am using Datatables / Editor for almost a year, and am getting fairly comfortable with it, but I still run into issues on occasion.

In this case, I'm trying to initialize the pageLength of a table with a value supplied as a user preference. This is not working correctly. The first page is correct per the setting of the user preference, but clicking any of the numbered page buttons, or 'Next' or 'Previous' displays the entire table, although indicator of what should be displaying is correct. If I change the 'pageLength' using the on-screen selector widget, things behave correctly for that setting and paging then works correctly thereafter, for any setting. It is only when trying to use the 'pageLength' passed in from the user's preferences that it fails.

I retrieve the user preference on the server and embed it in the HTML for the page, and it appears there, correctly. My problem is getting that value into the DataTable definition.

In my javascript that defines the table, I have the following:

            lengthChange: true,
             'pageLength':  function() {
                    var itPageLen = $('#itPageLen').attr('data-pagelength');
                    if (itPageLen === 'All') {
                        itPageLen = -1;
                    }
            },
            'lengthMenu':   [[10,25,50,100,-1],[10,25,50,100,'All']],
            'language': {
                'decimal':  '.',
                'thousands':    ','
            },

In the HTML, I have the following:

        <div id="itRole" data-itRole="tech"></div>
        <div id="itPageLen" data-pagelength=All></div>

The program always sets 'data-pagelength' to one of the values in the 'lengthMenu', so there is no mismatch, and no matter which one I use, it always displays the first page correctly and behaves incorrectly in the same way as described above whenever I use any of the paging buttons. I've tried a couple of other ways of initializing 'pageLength', but I always get the same incorrect behavior.

My use of the similar parameter, 'itRole', which affects other behavior , works correctly, which makes this more puzzling.

What is a correct way of passing and using this information?

Thanks in advance,
Tom

allan

You are setting pageLength to be a function, but as the documentation notes it needs to be an integer.

You either want to execute your function, or just evaluate the attribute value inline in the code.

Allan

TomBajzek

Allan,

Thanks for you response. However, you have identified a weakness in my understanding of Javascript: how would I execute the function where it is? I have a similar function to define the default for a form control elsewhere in the code, and that works:

                    def: function() {
                        var user = $('#theUser').attr('data-user');
                        return user;
                        }

I suppose that works because there is not a requirement for def to be an integer.

I had tried evaluating the attribute elsewhere and assigning it to a variable that I inserted into the pageLength definition, but that didn't work, either. I'm missing the point here, and would appreciate it if you would show me how I should execute this function in this case.

I apologize for being dumb.

Thanks,
Tom

TomBajzek

Allan,

I found the answer. One of the original, simpler attempts I had made just initialized 'pageLength" to be the variable itPageLen. What hadn't noticed until I reflected on your answer, is that itPageLen was not an integer, except in the case where it had been set to -1. I've now fixed that by converting it when I extract itPageLen from the data-pagelength in the HTML, and all is now fine.

I just didn't see the problem prior to rereading your answer.

Thanks much!
Tom

allan

Hi Tom,

No worries - great to hear you have it working now.

Allan

capegreg

It would greatly help if you posted your solution. I am trying to understand how your function sets pageLength. The the 2 code fragments below attempt to set the page length, but only the latter works, while the former only changes the dropdown with no data rows displayed.

This does not work
pageLength: function() {
return 10;
}
This works
pageLength: 10

kthorngren

Allan mentioned that setting the pageLength to a function won't work. Sounds like TomBajzek used a variable called itPageLen which is set before Datatables initializes. Then Tom used pageLength: itPageLen, in the initialization options.

Another option is using HTML5 Data attributes to se the pageLength value. You can set the value before initializing Datatables. The doc shows an example of setting the page length.

Kevin