In django-tables2, make number of rows displayed depend on screen size?

Question

When using django-tables2, use the paginate parameter to limit the number of rows displayed. For instance, if I have the table my_table, then in views.py I set it to display 10 rows as follows:

RequestConfig(request, paginate={'per_page':10}).configure(my_table)

My problem is that in my app I want the number of rows shown per page to depend on how big the user's screen is. For instance, 10 rows for mobile devices, but 25 rows for desktop screens. I am imagining doing in views.py what you can do with style sheets using the media rule (e.g., @media(max-height: 480px) {do something}).

Unfortunately, my (noob) understanding is that in Django, the view is relatively insulated from low-level parameters like screen size. However, I don't want to implement some scheme like sending information from the template to the view if there is already a simple solution baked into django-tables2 that I am just ignorant of.

Note I am using Bootstrap4 for my front end, if that makes any difference. The point is that I am already importing Javascript and jQuery into the project, at least at the template level.

Related general discussion
Interestingly, I haven't seen a lot of discussion of adapting table row count to media type, but there is obviously tons of more general discussion of responsive media-sensitive design:

• Responsive design with media query : screen size?
• https://developer.mozilla.org/en-US/docs/Web/CSS/@media

Guitarfish

Answer 1

I have no straightforward or complete solution, but I'll share some thoughts:

When (initially) rendering the table, Django-tables2 has no way of knowing the screen size. One of these workarounds might satisfy your needs:

Render less rows

In your initial page view, if your screen size is small:

• Hide some rows, then, adjust the offset and number of pages you request for the next pages using JavaScript. This will involve rewriting url parameters of the pagination links.
• Reload the page with a smaller number for per_page added to the url.
• Default to rendering a smaller number of rows, and allow the user to change the number of rows rendered with a dropdown, which is hidden for mobile users.

Optimize template for responsiveness

Optimize the template for different screen sizes rather than changing the number of rows. An example of how this could work can be found in the table displayed in webpack documentation. You might still want less rows for smaller screens with this technique though.

Client-side table-sorting

If the total number of rows is reasonable, sending everything to the client and deferring the pagination to something like datatables might work.

Monotheism

Thanks Jieter. I have considered datatables, but I really like django-tables2, which at this point is embedded deeply into my project so I really don't want to mess with it. I have thought a lot about this, and with my project basically done it is clear the best solution is to have variable row numbers, with second best being a small fixed number of rows that is optimized for phones, and less optimal for big screens (right now I show ten rows). – Guitarfish

Changing the number of rows seems more complicated than I appreciated. The problem is Django purposely doesn't care about screens and the front end stuff. That's sort of the whole point I guess. I wonder what the most clever way to get @media information to the view would be? Sneak it in as a GET request from the base template to the view? – Guitarfish

It's not that django doesn't care, but rather that it's fundamentally designed for a different internet than we have today. Even now, some people prefer to see the same interface across all devices and don't like responsive interfaces... – Monotheism

After reflection on your first idea: I'd start with 10 rows (or whatever small number works), and have a dropdown menu only for people on larger screens. I don't like it, because we would end up changing my urls.py file for every view with a table, just to add a 'number_rows' argument, and it starts to feel inelegant. But that was your point: if you really want to do this from the server-side, it is impossible to keep this kind of control elegant. It makes me a bit sad. :( – Guitarfish

You don't need to have the number_rows parameter part of the url, you can just as well use a query param: /tableview/3/?per_page=25 and use request.GET.get('per_page', 10) to default to 10. – Monotheism

@neuronet If you think my answer resolves your question, can you accept it? – Monotheism