pagination using ServiceStack, BootStrap & jQuery-jQuery Pagination plugin

  In this post, I’ll explain how I introduced paging into my Classifieds project. There are a number of different ways to accomplish this, including writing your own jQuery plugin. However, where possible, I prefer to take some shortcuts as I am in need of a quick solution & there are some great / well tested plugins out there. So for my Bootstrap classifieds site, I’ll be using ServiceStack – (this is my go-to webservice framework for this entire Classifieds project). This will return the resulting list of records. Importantly, it also includes total page count, current page number which we can make use of on the client side. jQuery Pagination plugin (optimised for Bootstrap) – is a well-written jquery pluging which I will use for the client-side pagination [ link to GitHub project] API – Reqest and Responses for Paging queries The first thing I’ll do is write the necessary request (namely, GetListings) and response (GetListingsResponse) objects. Thus an example request would use the api route ~/listings?CategoryId=1&PageNr=1, which returns the first page of listings within categoryId =1. This happens to be a Category of ‘Houses for Sale’ in my case] Messages – Request Parameters as propertiesWarning, here comes a tangent (skip this passage if you are only interested in the paging solution). ServiceStack promotes a message based approach. In my case, I know there will be additional future request filters/parameters I will want to add such as (e.g. CarMake). Using this message based design, these additional request parameters can simply be added as properties. This promotes a very extendable & clean code base without breaking any existing code. Compare this to to the more typical approach of having to amend the signature of a method (a typical method with request parameters is given below). Adding new parameters can get annoying quickly in these cases, as it requires modification of the existing method signature! (for more on this topic within an MVC project, see Jimmy Bogard’s post)   hmmmmphh – much uglier. jQuery Pagination Plugin Installing the plugin:You will need to download the jquery file from their homepage & then reference it in your page. http://~/scripts/jquery.twbsPagination.min.js Configuring the plugin: From the plugin’s homepage we can see that we can configure the plugin for a number of things. For my purposes, I will be using the response of the GetListings request & make use of the TotalPageCount & CurrentPageNr to pass into the jquery options function. $(‘#pagination-control’).twbsPagination({totalPages: @Model.TotalPageCount,visiblePages: 5,startPage: @Model.CurrentPageNr,href: ‘?’ + params + ‘&PageNr={{number}}’});   Setting the Page url using href propery I will use the href option to pass the page url (corresponding to my listings route). I want to pass all the page’s current request parameters (e.g. the CategoryId) as well as pass the newly selected PageNr to the route. Not being a Javascript guy (!!), I ended up with a bit of an ugly implemetion for this. [If anyone has some cleaner code or better suggestion, please leave them in the comments] https://buildclassifieds.com/2016/01/09/pagination-using-servicestack-bootstrap-jquery/.