Bootstrap Pagination Example

In this tutorial you will learn bootstrap paging, you can display a large list data asynchronously using bootstrap pagination.

Bootstrap Pagination Implementation Tutorial
Pagination is very useful feature in any application, we need this more often whenever we have a huge collection of data to be displayed on UI, Pagination helps loading UI faster and easy to navigate with

Title Shortinfo ImageTitle
10 Blog Title 10 blog shortinfo 10 Blog imageTitle
11 Blog Title 11 blog shortinfo 11 Blog imageTitle
12 Blog Title 12 blog shortinfo 12 Blog imageTitle
13 Blog Title 13 blog shortinfo 13 Blog imageTitle
14 Blog Title 14 blog shortinfo 14 Blog imageTitle
15 Blog Title 15 blog shortinfo 15 Blog imageTitle
16 Blog Title 16 blog shortinfo 16 Blog imageTitle
17 Blog Title 17 blog shortinfo 17 Blog imageTitle
18 Blog Title 18 blog shortinfo 18 Blog imageTitle
19 Blog Title 19 blog shortinfo 19 Blog imageTitle

Pagination Implement example step by step

Step 1:
To use pagination using bootstrap, you need to install PagedList in your project using NuGet Package

pagedList installation

Now you can use the PagedList reference in your controller and razor view, like below

using PagedList; 
using PagedList.Mvc; 

Step 2:
Now implement pagination in your controller

Notice, in controller we are fetching data asynchronously, look at how async and await is implemented.

public async Task<ActionResult> pagination(int page = 1)
    IPagedList<blogObj> _blist = await Task.Run(()=> GetDemoBlogList().ToPagedList(page, 12));
    return await Task.Run(() => View("pagination", _blist));

In below method i am returning a list of blog object blogObj using loop, you can fetch data from database and populate the same collection object.

public  List<blogObj> GetDemoBlogList()
    List<blogObj> list = new List<blogObj>();
    for (int i = 0; i <= 100; i++)
        list.Add(new blogObj()
    title = string.Format("{0} Blog Title", i),
    shortinfo = string.Format("{0} blog shortinfo", i),
    imageTitle = string.Format("{0} Blog imageTitle", i),
    blogActionName = string.Format("{0} Blog blogActionName", i),
    return list;

Step 3:
Add the reference of bootstrap in your page like given below

<link href="~/Content/bootstrap.css" rel="stylesheet" />

Or you also can add the reference in BundleConfig.cs this way

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/bootstrap.css"));

Step 4:
Now we have to display the object collection in UI (razor view)

<div style="padding: 10px;"> @{
IPagedList<blogObj> blogList = ViewBag.BlogList as IPagedList<blogObj>;
<table style="width:100%;">
<tr style="font-weight:bold;background-color:#e2e2e2">
<td>Title </td>
<td>Shortinfo </td>
<td>ImageTitle </td>
@foreach (blogObj b in blogList)
<td>@b.title </td>
<td>@b.shortinfo </td>
<td>@b.imageTitle </td>
<div style="background: #fff; text-align: right; padding: 4px;">
@Html.PagedListPager(blogList, page => Url.Action("pagination", new { page }), PagedListRenderOptions.ClassicPlusFirstAndLast)

Bootstrap pagination implementation ends here.

Pagination in Bootstrap
Bootstrap Tutorial

bootstrap css tutorial with examples
Bootstrap Examples | Join CSS Course