Hi sani.ss501,
Check this example. Now please take its reference and correct your code.
For modetails on paging refer below article.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
Model
public class CustomerModel
{
public List<CustomerDetails> Customers { get; set; }
public int PageIndex { get; set; }
public int PageSize { get; set; }
public int RecordCount { get; set; }
}
public class CustomerDetails
{
public DateTime? OrderDate { get; set; }
public string CustomerID { get; set; }
public string ContactName { get; set; }
public int EmployeeID { get; set; }
public string FirstName { get; set; }
}
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
List<CustomerDetails> dummy = new List<CustomerDetails>();
dummy.Add(new CustomerDetails());
return View(dummy);
}
[HttpPost]
public JsonResult AjaxMethod(int pageIndex)
{
NorthwindEntities entities = new NorthwindEntities();
List<CustomerDetails> customers = (from o in entity.Orders
join c in entity.Customers on o.CustomerID equals c.CustomerID
join emp in entity.Employees on o.EmployeeID equals emp.EmployeeID
select new CustomerDetails
{
CustomerID = c.CustomerID,
ContactName = c.ContactName,
EmployeeID = emp.EmployeeID,
FirstName = emp.FirstName,
OrderDate = o.OrderDate
}).ToList();
CustomerModel model = new CustomerModel();
model.PageIndex = pageIndex;
model.PageSize = 10;
model.RecordCount = customers.Count();
int startIndex = (pageIndex - 1) * model.PageSize;
model.Customers = customers.OrderBy(customer => customer.CustomerID).Skip(startIndex).Take(model.PageSize).ToList();
return Json(model);
}
}
View
@model IEnumerable<CustomerDetails>
@{
Layout = null;
WebGrid webGrid = new WebGrid(source: Model, canSort: false, canPage: false);
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
<style type="text/css">
.Pager span {
text-align: center;
color: #333;
display: inline-block;
width: 20px;
background-color: #B8DBFD;
margin-right: 3px;
line-height: 150%;
border: 1px solid #B8DBFD;
}
.Pager a {
text-align: center;
display: inline-block;
width: 20px;
background-color: #ccc;
color: #333;
border: 1px solid #ccc;
margin-right: 3px;
line-height: 150%;
text-decoration: none;
}
</style>
</head>
<body>
<h4>Customers</h4>
<hr/>
@webGrid.GetHtml(
htmlAttributes: new { @id = "WebGrid", @class = "Grid" },
columns: webGrid.Columns(
webGrid.Column("CustomerID", "Customer Id"),
webGrid.Column("ContactName", "Customer Name"),
webGrid.Column("EmployeeID", "Employee Id"),
webGrid.Column("FirstName", "Employee Name"),
webGrid.Column("OrderDate", "Order Date") ))
<br/>
<div class="Pager"></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="~/Scripts/quicksearch.js"></script>
<script src="~/Scripts/ASPSnippets_Pager.min.js"></script>
<script type="text/javascript">
$(function () {
//Add Header Row with TextBoxes.
var row = $("<TR />");
$("#WebGrid TR").eq(0).find("TH").each(function () {
row.append("<th><input type = 'text' /></th>");
});
$("#WebGrid TR").eq(0).after(row);
//Applying the QuickSearch Plugin to each TextBox.
$("#WebGrid TR").eq(1).find("INPUT").each(function (i) {
$(this).quicksearch("#WebGrid tr:not(:has(th))", {
'testQuery': function (query, txt, row) {
return $(row).children(":eq(" + i + ")").text().toLowerCase().indexOf(query[0].toLowerCase()) != -1;
}
});
});
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 = $("#WebGrid tbody tr:last-child").clone(true);
$("#WebGrid tbody tr").remove();
$.each(model.Customers, function () {
var customer = this;
$("td", row).eq(0).html(customer.CustomerID);
$("td", row).eq(1).html(customer.ContactName);
$("td", row).eq(2).html(customer.EmployeeID);
$("td", row).eq(3).html(customer.FirstName);
$("td", row).eq(4).html(customer.OrderDate);
$("#WebGrid").append(row);
row = $("#WebGrid tbody tr:last-child").clone(true);
});
$(".Pager").ASPSnippets_Pager({
ActiveCssClass: "current",
PagerCssClass: "pager",
PageIndex: model.PageIndex,
PageSize: model.PageSize,
RecordCount: model.RecordCount
});
};
</script>
</body>
</html>
