Step 1: Download the css and js file for pagination from following link:
https://drive.google.com/drive/folders/1A2rhGVGpHv_1Tkf3uDj1mUDzr7m-y5J3?usp=sharing
Step 2: Create new class named "PagedModel.cs" in your Models folder as following:
public class PagedModel<T>
{
public int TotalRecords { get; set; }
public int PageCount { get; set; }
public int CurrentPageIndex { get; set; }
public T Data { get; set; }
}
Step 3: Add following code in your MVC controller class:
public ActionResult Index()
{
ViewBag.Platforms = GetPlatformsList();
var result = FilterData(1, 10);
return View(result);
}
[HttpPost]
public ActionResult Index(int currentPageIndex, int totalRecords)
{
ViewBag.Platforms = GetPlatformsList();
var result = FilterData(currentPageIndex, 10);
return View(result);
}
// To-Do: Put this method in business class.
public PagedModel<IList<CustomerModel>> FilterData(int pageNumber, int pageSize)
{
PagedModel<IList<CustomerModel>> result = new PagedModel<IList<CustomerModel>>();
ReportContext context = new ReportContext();
var customers = (from customer in context.Customers
where customer.IsActive
select customer);
int totalRecords = 0;
var firstPageData = PagedResult(customers, pageNumber, pageSize, cust => cust.Id, false, out totalRecords);
result.TotalRecords = totalRecords;
double pageCount = (double)(totalRecords / Convert.ToDecimal(pageSize));
result.PageCount = (int)Math.Ceiling(pageCount);
result.CurrentPageIndex = pageNumber;
result.Data = firstPageData.ToList();
return result;
}
// To-Do: Put this method in common class.
public static IQueryable<T> PagedResult<T, TResult>(IQueryable<T> query, int pageNum, int pageSize,
Expression<Func<T, TResult>> orderByProperty, bool isAscendingOrder, out int rowsCount)
{
if (pageSize <= 0) pageSize = 20;
//Total result count
rowsCount = query.Count();
//If page number should be > 0 else set to first page
if (rowsCount <= pageSize || pageNum <= 0) pageNum = 1;
//Calculate nunber of rows to skip on pagesize
int excludedRows = (pageNum - 1) * pageSize;
query = isAscendingOrder ? query.OrderBy(orderByProperty) : query.OrderByDescending(orderByProperty);
//Skip the required rows for the current page and take the next records of pagesize count
return query.Skip(excludedRows).Take(pageSize);
}
Step 4: Add following html code in your MVC view(.cshtml) page:
@model Project.Models.PagedModel<IList<Project.Models.CustomerModel>>
@{
ViewBag.Title = "Home Page";
}
<div>
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
<h4 style="margin-top:25px;">
Supermetrics Report
<label class="pull-right">Total Records: @Model.TotalRecords</label>
</h4>
<hr />
<div class="form-group" style="overflow-x:auto;">
<table class="table table-bordered" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th> Id </th>
<th> Name </th>
<th> Desc </th>
<th> Age </th>
</tr>
</thead>
<tbody>
@{
if (Model.Data.Count == 0)
{
<tr>
<td colspan="30">
No Record Found
</td>
</tr>
}
else
{
foreach (var data in Model.Data)
{
<tr>
<td> @data.Id </td>
<td> @data.Name </td>
<td> @data.Desc </td>
<td> @data.Age </td>
</tr>
}
}
}
</tbody>
</table>
</div>
<br />
<ul id="ulPager" class="blade-pagination" data-current="@Model.CurrentPageIndex" data-total="@Model.PageCount"></ul>
<input type="hidden" id="hfCurrentPageIndex" name="currentPageIndex" value="@Model.CurrentPageIndex" />
<input type="hidden" id="hfTotalRecords" name="totalRecords" value="10" />
@*<input type="hidden" id="hfPlatform" name="platform" value="All" />*@
}
</div>
<style type="text/css">
body {
font-family: Arial;
font-size: 10pt;
}
table {
border: 1px solid #ccc;
border-collapse: collapse;
background-color: #fff;
}
table th {
background-color: #B8DBFD;
color: #333;
font-weight: bold;
}
table th, table td {
padding: 5px;
border: 1px solid #ccc;
}
table, table table td {
border: 0px solid #ccc;
}
#ulPager {
margin: 0 auto;
width: fit-content;
}
</style>
@section scripts{
<link href="~/Content/blade-pagination.css" rel="stylesheet" />
<script src="~/Scripts/jquery.blade-pagination.js"></script>
<script type="text/javascript">
function PagerClick(index) {
document.getElementById("hfCurrentPageIndex").value = index;
document.forms[0].submit();
}
function filterData() {
document.getElementById("hfCurrentPageIndex").value = 1;
document.forms[0].submit();
}
$('#ulPager').bladePagination({
maxPageNum: 9,
firstLabel: 'First',
prevLabel: 'Prev',
nextLabel: 'Next',
lastLabel: 'Last',
moreLabel: '...',
clickPage: function (page) {
PagerClick(page);
}
});
</script>
}
https://drive.google.com/drive/folders/1A2rhGVGpHv_1Tkf3uDj1mUDzr7m-y5J3?usp=sharing
Step 2: Create new class named "PagedModel.cs" in your Models folder as following:
public class PagedModel<T>
{
public int TotalRecords { get; set; }
public int PageCount { get; set; }
public int CurrentPageIndex { get; set; }
public T Data { get; set; }
}
Step 3: Add following code in your MVC controller class:
public ActionResult Index()
{
ViewBag.Platforms = GetPlatformsList();
var result = FilterData(1, 10);
return View(result);
}
[HttpPost]
public ActionResult Index(int currentPageIndex, int totalRecords)
{
ViewBag.Platforms = GetPlatformsList();
var result = FilterData(currentPageIndex, 10);
return View(result);
}
// To-Do: Put this method in business class.
public PagedModel<IList<CustomerModel>> FilterData(int pageNumber, int pageSize)
{
PagedModel<IList<CustomerModel>> result = new PagedModel<IList<CustomerModel>>();
ReportContext context = new ReportContext();
var customers = (from customer in context.Customers
where customer.IsActive
select customer);
int totalRecords = 0;
var firstPageData = PagedResult(customers, pageNumber, pageSize, cust => cust.Id, false, out totalRecords);
result.TotalRecords = totalRecords;
double pageCount = (double)(totalRecords / Convert.ToDecimal(pageSize));
result.PageCount = (int)Math.Ceiling(pageCount);
result.CurrentPageIndex = pageNumber;
result.Data = firstPageData.ToList();
return result;
}
// To-Do: Put this method in common class.
public static IQueryable<T> PagedResult<T, TResult>(IQueryable<T> query, int pageNum, int pageSize,
Expression<Func<T, TResult>> orderByProperty, bool isAscendingOrder, out int rowsCount)
{
if (pageSize <= 0) pageSize = 20;
//Total result count
rowsCount = query.Count();
//If page number should be > 0 else set to first page
if (rowsCount <= pageSize || pageNum <= 0) pageNum = 1;
//Calculate nunber of rows to skip on pagesize
int excludedRows = (pageNum - 1) * pageSize;
query = isAscendingOrder ? query.OrderBy(orderByProperty) : query.OrderByDescending(orderByProperty);
//Skip the required rows for the current page and take the next records of pagesize count
return query.Skip(excludedRows).Take(pageSize);
}
Step 4: Add following html code in your MVC view(.cshtml) page:
@model Project.Models.PagedModel<IList<Project.Models.CustomerModel>>
@{
ViewBag.Title = "Home Page";
}
<div>
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
<h4 style="margin-top:25px;">
Supermetrics Report
<label class="pull-right">Total Records: @Model.TotalRecords</label>
</h4>
<hr />
<div class="form-group" style="overflow-x:auto;">
<table class="table table-bordered" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th> Id </th>
<th> Name </th>
<th> Desc </th>
<th> Age </th>
</tr>
</thead>
<tbody>
@{
if (Model.Data.Count == 0)
{
<tr>
<td colspan="30">
No Record Found
</td>
</tr>
}
else
{
foreach (var data in Model.Data)
{
<tr>
<td> @data.Id </td>
<td> @data.Name </td>
<td> @data.Desc </td>
<td> @data.Age </td>
</tr>
}
}
}
</tbody>
</table>
</div>
<br />
<ul id="ulPager" class="blade-pagination" data-current="@Model.CurrentPageIndex" data-total="@Model.PageCount"></ul>
<input type="hidden" id="hfCurrentPageIndex" name="currentPageIndex" value="@Model.CurrentPageIndex" />
<input type="hidden" id="hfTotalRecords" name="totalRecords" value="10" />
@*<input type="hidden" id="hfPlatform" name="platform" value="All" />*@
}
</div>
<style type="text/css">
body {
font-family: Arial;
font-size: 10pt;
}
table {
border: 1px solid #ccc;
border-collapse: collapse;
background-color: #fff;
}
table th {
background-color: #B8DBFD;
color: #333;
font-weight: bold;
}
table th, table td {
padding: 5px;
border: 1px solid #ccc;
}
table, table table td {
border: 0px solid #ccc;
}
#ulPager {
margin: 0 auto;
width: fit-content;
}
</style>
@section scripts{
<link href="~/Content/blade-pagination.css" rel="stylesheet" />
<script src="~/Scripts/jquery.blade-pagination.js"></script>
<script type="text/javascript">
function PagerClick(index) {
document.getElementById("hfCurrentPageIndex").value = index;
document.forms[0].submit();
}
function filterData() {
document.getElementById("hfCurrentPageIndex").value = 1;
document.forms[0].submit();
}
$('#ulPager').bladePagination({
maxPageNum: 9,
firstLabel: 'First',
prevLabel: 'Prev',
nextLabel: 'Next',
lastLabel: 'Last',
moreLabel: '...',
clickPage: function (page) {
PagerClick(page);
}
});
</script>
}
No comments:
Post a Comment