Hi smalikbudhwan...,
For paging you need to set the Pageable method.
First you need to inherit the mvc-grid.js script file and apply the MvcGrid function to all the elements having class mvc-grid.
Refer below example.
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 Customer
{
public string CustomerID { get; set; }
public string ContactName { get; set; }
public string City { get; set; }
public string Country { get; set; }
}
Controller
public class HomeController : Controller
{
private DBCtx Context { get; }
public HomeController(DBCtx _context)
{
this.Context = _context;
}
public IActionResult Index()
{
IQueryable<Customer> customers = this.Context.Customers;
return View(customers);
}
}
View
@model IQueryable<WebGrid_MVC_Core.Models.Customer>
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@using NonFactors.Mvc.Grid
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/css/mvc-grid/mvc-grid.css" rel="stylesheet" />
</head>
<body>
@(Html.Grid(Model).Build(columns =>
{
columns.Add(model => model.CustomerID).Titled("Customer ID");
columns.Add(model => model.ContactName).Titled("Customer Name");
columns.Add(model => model.City).Titled("City");
columns.Add(model => model.Country).Titled("Country");
}).Pageable(pager =>
{
pager.PageSizes = new Dictionary<Int32, String> { { 0, "All" }, { 5, "5" }, { 10, "10" }, { 50, "50" } };
pager.ShowPageSizes = false;
pager.PagesToDisplay = 3;
pager.CurrentPage = 1;
pager.RowsPerPage = 5;
}));
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="~/js/mvc-grid/mvc-grid.js"></script>
<script type="text/javascript">
document.querySelectorAll(".mvc-grid").forEach(element => new MvcGrid(element));
</script>
</body>
</html>
Screenshot
