Hi sani.ss501,
Using this article i have created the example.
Refer the example and change your code as per your table structure.
Model
public class CustomerModel
{
public List<Customer> Customers { get; set; }
public int PageIndex { get; set; }
public int PageSize { get; set; }
public int RecordCount { get; set; }
}
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
[HttpPost]
public JsonResult AjaxMethod(int pageIndex)
{
NorthwindEntities entities = new NorthwindEntities();
CustomerModel model = new CustomerModel();
model.PageIndex = pageIndex;
model.PageSize = 5;
model.RecordCount = entities.Customers.Count();
int startIndex = (pageIndex - 1) * model.PageSize;
model.Customers = (from customer in entities.Customers
select customer)
.OrderBy(customer => customer.CustomerID)
.Skip(startIndex)
.Take(model.PageSize).ToList();
return Json(model);
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div class="container">
<div class="row" id="dvRows">
<div class="body__ col-md-3 col-sm-6 card" style="padding-left: 15px;margin-top:2%;">
<div class="blog_post">
<div class="image_box">
<img id="imgDetails" src="~/assets/Content/img/1st-big-item.jpg" alt="" style="margin-top:2%;">
</div>
<div class="info IRANSans">
<span class="category IRANSans">
<i class="fa fa-hashtag"></i>
<span id="lblId"></span>
</span>
<span class="title " style="display: block;margin-top: 80px;text-align: right;">
<label class="IRANSans" href="#">
<i class="fa fa-user"></i>
<span id="lblName"></span>
</label>
</span>
<hr />
<div class="row" style="margin-bottom: 2%;">
<div class="col-lg-6"><i class="fa fa-calendar" style="margin-left:2%;"></i><span id="lblCity"></span></div>
<div class="col-lg-6" style="background: #55d555;border-radius: 15px;color: #fff;"><span id="lblCountry"></span></div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="Pager"></div>
</div>
</div>
<script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
<link rel="stylesheet" media="screen" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css' />
<script src="~/Scripts/ASPSnippets_Pager.min.js"></script>
<script type="text/javascript">
$(function () {
GetCustomers(1);
});
$("body").on("click", ".Pager .page", function () {
GetCustomers(parseInt($(this).attr('page')));
});
function GetCustomers(pageIndex) {
$.ajax({
type: "POST",
url: "/Home/AjaxMethod",
data: '{pageIndex: ' + pageIndex + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
};
function OnSuccess(response) {
var model = response;
var row = $("#dvRows .body__:first-child").clone(true);
$("#dvRows .body__").remove();
var body = "";
$.each(model.Customers, function () {
var customer = this;
$(row).find('#imgDetails').attr("src", "~/Images/" + customer.CustomerID);
$(row).find('#lblId').html(customer.CustomerID);
$(row).find('#lblName').html(customer.ContactName);
$(row).find('#lblCity').html(customer.City);
$(row).find('#lblCountry').html(customer.Country);
$("#dvRows").append(row);
row = $("#dvRows .body__:last-child").clone(true);
});
$(".Pager").ASPSnippets_Pager({
ActiveCssClass: "current",
PagerCssClass: "pager",
PageIndex: model.PageIndex,
PageSize: model.PageSize,
RecordCount: model.RecordCount
});
};
</script>
</body>
</html>
Screenshot
