Recently I've got a task to show grid data with pagination using Backbone.Marionette. Moreover we were needed to filter data by some flag(active/finished).I am not a guru of UI :-) I am mostly backend developer, but had some experience in UI and it was funny and interesting for me to resolve this issue.
I've a little bit simplified the final code of pagination/filtering module in demo purposes and prepared real running sample on my Amazon ec2 instance, so you can analyse js source and networks calls under F12/firebug or whatever you like to use. Try
(Demo)Pagination/filtering (http://52.32.134.99:3000)
I've decided to use Backbone.PageableCollection to configure paging with its server-side mode. See
backbone-pageable for more details. Below is how events collection looks like:
Pay attention to
parseState and
parseRecords methods. They allowed us to recognize
totalCount and
items fields get passed from server.
From ui side we will send
pageSize,
showActiveEventsOnly and
offset to server side and then use them to fetch appropriate subset of data.
On server side(Java) I've used simple grizzly server and method which returns paging data as follows:
So as you can see we use parameters get passed as query params from ui side to determine which part of data we need to return as per given offset/filtering flag. I made screenshot describing what happened under the hood, when you, for example, click second page on paging control:
It depends on you how to implement server side related logic to get paged data.
The one this I should mention the final set of data we will return to ui is wrapped with custom object that contains two key fields:
result
items and
totalCount. I described those fields above.
They are used by ui to build corresponding ui(remember parseState/parseRecords methods ? :-))
The most efficient way to get subset of data is to resolve it on database level, but I repeat it depends on your decision and details of your project.
Okay, now we have all the data from the server and we are ready to show it on ui side.
Let's see how our filter and paging controls are defined. I've used RequireJS as module loader, so the module looks like as follows:
and the corresponding templates:
I've used
materializecss so paging controls looks in Material Design style.
Model and View are linked using CompositeView for grid data and simple ItemView for pagination/filtering logic:
And the final screen where everything is together:
P.S. I hope my solution will be helpful to someone :-)
