Hi mahesh213,
Using the below article i have created the example.
Check this example. Now please take its reference and correct your code.
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<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(string searchTerm, string sortColumn, string sortDirection, int pageIndex = 1)
{
NorthwindEntities entities = new NorthwindEntities();
List<Customer> customers = new List<Customer>();
if (!string.IsNullOrEmpty(searchTerm))
{
customers = entities.Customers.Where(x => x.ContactName.StartsWith(searchTerm)).ToList();
}
else
{
customers = entities.Customers.ToList();
}
switch (sortColumn)
{
case "":
case "CustomerID":
if (sortDirection == "ASC")
{
customers = customers.OrderBy(x => x.CustomerID).ToList();
}
else
{
customers = customers.OrderByDescending(x => x.CustomerID).ToList();
}
break;
case "ContactName":
if (sortDirection == "ASC")
{
customers = customers.OrderBy(x => x.ContactName).ToList();
}
else
{
customers = customers.OrderByDescending(x => x.ContactName).ToList();
}
break;
case "City":
if (sortDirection == "ASC")
{
customers = customers.OrderBy(x => x.City).ToList();
}
else
{
customers = customers.OrderByDescending(x => x.City).ToList();
}
break;
case "Country":
if (sortDirection == "ASC")
{
customers = customers.OrderBy(x => x.Country).ToList();
}
else
{
customers = customers.OrderByDescending(x => x.Country).ToList();
}
break;
}
CustomerModel model = new CustomerModel();
model.PageIndex = pageIndex;
model.PageSize = 10;
model.RecordCount = customers.Count();
model.Customers = customers.Skip((pageIndex - 1) * model.PageSize).Take(model.PageSize).ToList();
return Json(model);
}
}
View
<input type="text" id="txtSearchTerm" />
<hr />
<table id="tblCustomers" cellpadding="0" cellspacing="0">
<tr>
<th><a href="javascript:;">CustomerID</a></th>
<th><a href="javascript:;">ContactName</a></th>
<th><a href="javascript:;">City</a></th>
<th><a href="javascript:;">Country</a></th>
</tr>
<tr style="display: none">
<td>CustomerID</td>
<td>ContactName</td>
<td>City</td>
<td>Country</td>
</tr>
</table>
<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/ASPSnippets_Pager.min.js"></script>
<script type="text/javascript">
var sortName = "";
var sortDirection = "ASC";
var pageindex = 1;
$(function () {
GetCustomers(1);
});
$("body").on("keyup", "#txtSearchTerm", function () {
sortName = $(this).html();
sortDirection = sortDirection == "ASC" ? "DESC" : "ASC";
GetCustomers(1);
});
$("body").on("click", "#tblCustomers th a", function () {
sortName = $(this).html();
sortDirection = sortDirection == "ASC" ? "DESC" : "ASC";
GetCustomers(pageindex);
});
$("body").on("click", ".Pager .page", function () {
pageindex = parseInt($(this).attr('page'));
GetCustomers(pageindex);
});
$("body").on("click", "#tblCustomers tbody tr", function () {
alert($(this).find('td').eq(0).html());
});
function GetCustomers(pageIndex) {
var obj = {};
obj.pageIndex = pageIndex;
obj.searchTerm = $('#txtSearchTerm').val();
obj.sortColumn = sortName;
obj.sortDirection = sortDirection;
$.ajax({
type: "POST",
url: "/Home/AjaxMethod",
data: JSON.stringify(obj),
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 = $("#tblCustomers tr:last-child").removeAttr("style").clone(true);
$("#tblCustomers tr").not($("#tblCustomers tr:first-child")).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.City);
$("td", row).eq(3).html(customer.Country);
$("#tblCustomers").append(row);
row = $("#tblCustomers tr:last-child").clone(true);
});
$(".Pager").ASPSnippets_Pager({
ActiveCssClass: "current",
PagerCssClass: "pager",
PageIndex: model.PageIndex,
PageSize: model.PageSize,
RecordCount: model.RecordCount
});
};
</script>
Screenshot