Bootstrap List Pager
Bootstrap provides nice lists to display all kind of items your website might need. It is very useful, and because it meant to show just few items it is not paged. Problem is, sometimes I do need it paged. For most cases, it can be just a few rows, but for some it can grow in few dozens. Not hundreds, that would mean you need a grid, but still having dozens rows would make UI look really ugly. For these cases, I would want paged list kind of like one on the right in this picture.
I could probably use some framework or plugin for this, but functionality I need is very minimal so I created a function that does only what I want - let me add previous/next buttons to the list with few lines of JavaScript. You don't even need a Bootstrap, to be clear, you can style list yourself. The only requirement is jQuery, which you can also replace with pure JavaScript if desired.
In the script section, I have hard-coded list of items bound to the list via "bindList()" function. But I only want items for a current page for the paged list. So before calling this function, I create "pager" object and set page size then assign all list items to pager.items and send this object into "pagerInit" function for initialization.
This "pagerInit" is where most of the job gets done. It adds two methods to the pager, "prevPage" and "nextPage", so I can use them to move through the pages. And it splits collection of items into pages, so I can use expression pager.pagedItems[pager.currentPage] to get items for the list in UI. With this setup, to bind items I simply loop over collection and add current page items to element with ID "myList" dynamically. The links to previous and next pages will call corresponding pager functions to reset current page number and then reload list. And that's it.
In application items would probably come from the back-end, which is why I needed pager in the first place, as number of items can differ. Also pager can be improved with displaying page numbers, as well as sorting, filtering etc. but I really wanted a simple solution and not full-blown framework, otherwise I would rather look for existing one before diving into coding. And this works for what it intended beautifully.
