Dynamic Page Size on Data View?

Wappler General Need Help
1

Wappler's data views and pagination work great together!

What I'd like to do next is set the "page size" property dynamically based on the user's device. I've set a variable at the top of my page and tried using it in the page size property but no luck. I've tried various methods including

pagesize="varPageSize"
pagesize="{{varPageSize}}"
pagesize="'varPageSize'"

None have worked. Is there a format that will work for this property so it can be a dynamic value? TIA

2

It should be varPageSize.value (or just use the picker on a dynamic attribute :stuck_out_tongue_winking_eye:)

3

The page size property doesn't have a dynamic picker option. :frowning: This didn't work either to my sadness:

pagesize="varPageSize.value"
4

You could use the Browser component to set the page size.

<p dmx-text="'Viewport width: '+browser1.viewport.width"></p>
<p dmx-text="'Viewport height: '+browser1.viewport.height"></p>
5

Do you have dmx-bind:pagesize= ? To set a property dynamically it needs the dmx-bind part

6

I set the sizes first.... depending on the viewport... i gen n number.. eg 10.... 21...21..32... 36 whatever....

Then get the value based on the results and place it in offsetdatalimit.value

<dmx-value id="smallscreen_offset" dmx-bind:value="(browser1.viewport.width <= 767) ? 10 : ''"></dmx-value>
<dmx-value id="mediumscreen_offset" dmx-bind:value="(browser1.viewport.width.inRange(768, 991)) ? 21 : ''"></dmx-value>
<dmx-value id="largescreen_offset" dmx-bind:value="(browser1.viewport.width.inRange(992, 1199)) ? 21 : ''"></dmx-value>
<dmx-value id="xlargescreen_offset" dmx-bind:value="(browser1.viewport.width.inRange(1200, 1460)) ? 32 : ''"></dmx-value>
<dmx-value id="xxlargescreen_offset" dmx-bind:value="(browser1.viewport.width >= 1461) ? 36 : ''"></dmx-value>

<dmx-value id="offsetdatalimit" dmx-bind:value="{{smallscreen_offset.value}}{{mediumscreen_offset.value}}{{largescreen_offset.value}}{{xlargescreen_offset.value}}{{xxlargescreen_offset.value}}"></dmx-value>

Then in my server connect... dmx-param:limit="offsetdatalimit.value"

<dmx-serverconnect id="serverconnect" url="dmxConnect/api/serverconnect.php" dmx-param:offset="query.offset" dmx-param:limit="offsetdatalimit.value" dmx-param:sort="query.sort" dmx-param:dir="query.dir"></dmx-serverconnect>

7

Confusingly, you need to ignore the Page Size property at the top under Data View Properties (which doesn't have a picker) and instead go to Dynamic Attributes and add it from there. It's the same for sorting and offset.

To do it directly in the code, what bpj wrote should work:

dmx-bind:pagesize="varPageSize.value"

8

That was the clue I needed to hear @PaulS as I often still forget to check Dynamic Attributes to see if the property exists there as well. Thank you to all the other contributors for your answers as they too were all very valuable @Mozzi @bpj @ben and I look forward now to experimenting with each one.

2 Likes
9

Glad you came right :slight_smile:
Sorry I misinterpreted your question....
I thought you wanted the "page size" value based on the users device... eg.. screen size... mobile.. laptop.... desktop..... because once you determine the "screen size" you can determine how many records you wish to display :slight_smile:

but glad the solution above did what you wanted....

10

I ended up using your example code as it perfectly met my need, I just changed the offsetdatalimit variable to my pagesize variable. Since the screen size is very closely correlated with device, your code fit the requirement perfectly. It was a bonus (a cool feature) that the masonry grid would update automagically as I changed the screen size manually. There's no drawback to this implementation if a desktop user just has a smaller browser width. They can easily maximize their browser window if they prefer more videos per page. :+1:

1 Like