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 |
| 20 Blog Title | 20 blog shortinfo | 20 Blog imageTitle |
| 21 Blog Title | 21 blog shortinfo | 21 Blog imageTitle |
| 22 Blog Title | 22 blog shortinfo | 22 Blog imageTitle |
| 23 Blog Title | 23 blog shortinfo | 23 Blog imageTitle |
| 24 Blog Title | 24 blog shortinfo | 24 Blog imageTitle |
| 25 Blog Title | 25 blog shortinfo | 25 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
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>
</tr>
@foreach (blogObj b in blogList)
{
<tr>
<td>@b.title </td>
<td>@b.shortinfo </td>
<td>@b.imageTitle </td>
</tr>
}
</table>
<div style="background: #fff; text-align: right; padding: 4px;">
@Html.PagedListPager(blogList, page => Url.Action("pagination", new { page }), PagedListRenderOptions.ClassicPlusFirstAndLast)
</div>
Bootstrap pagination implementation ends here.
Bootstrap Tutorial