In this tutorial, I will show you How to Bind & Sort Grid with Jquery in ASP.NET MVC 6. You can sort by clicking on column names & paging by selecting the page size and the click on arrows first arrow is to move to first page,click on arrows second arrow is to move to previous page,click on arrows third arrow is to move to next page and click on arrows fourth arrow is to move to last page. First step, you should create a MVC app and make model Users.cs. Now write the following code:

Model: Users.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Data.SqlClient;
using System.ComponentModel.DataAnnotations;
namespace MvcMovieStore.Models
{
public class Users
{
DataSet ds;
[Required]
[Display(Name = "ID")]
public int ID { get; set; }

[Required]
[Display(Name = "UserName")]
public string UserName { get; set; }

[Required]
[Display(Name = "Gender")]
public string Gender { get; set; }

[Required]
[Display(Name = "Country")]
public string Country { get; set; }

public DataTable GetUsers()
{
try
{
ds = new DataSet();
     SqlConnection con = new qlConnection(System.Configuration.ConfigurationManager.
ConnectionStrings["con"].ConnectionString);
SqlDataAdapter sqlAda = new SqlDataAdapter("Select User_Id,UserName,Country,Gender from User_Details", con);
sqlAda.Fill(ds);
return ds.Tables[0];
}
catch (Exception err)
{
throw err;
}
}

}
}

Controller: UsersController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Data;
using MvcMovieStore.Models;

namespace MvcMovieStore.Controllers
{
public class UsersController : Controller
{
//
// GET: /Users/
public ActionResult Index()
{
DataTable dtGrid = new DataTable();
Users objUser = new Users();
dtGrid = objUser.GetUsers();

List<Users> Gridd = new List<Users>();

foreach (DataRow dr in dtGrid.Rows)
{
    Users users = new Users();
    users.ID = Convert.ToInt32(dr["User_Id"]);
    users.UserName = dr["UserName"].ToString();
    users.Country = dr["Country"].ToString();
    users.Gender = dr["Gender"].ToString();

    Gridd.Add(users);
}
return View("Index", Gridd);
}
}
}

View: Index.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master"
Inherits="System.Web.Mvc.ViewPage<IEnumerable<MvcMovieStore.Models.Users>>"%>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Binding and Sorting Grid in ASP.NET MVC 2.0 using JQuery
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
</script>
<script src="../../Scripts/jquery.tablesorter.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.tablesorter.pager.js" type="text/javascript"></script>
<style type="text/css">
table.tablesorter thead tr .header
{
    background-color: #000000;
    color: #fff;
    cursor: pointer;
    padding: 5px 15px;
}
img{width=20px;height:20px;}
</style>
<h2>
Index</h2>
<%-- only for sorting
<script type="text/javascript">
$(document).ready(function () {
    $("#userTable").tablesorter();
});
</script>--%>
<%--Sorting and paging --%>
<script type="text/javascript">
$(function () {
    $("#userTable")
          .tablesorter({ widthFixed: true })
          .tablesorterPager({ container: $("#pager") });
    $("#userTable").bind("sortStart", function () {
    }).bind("sortEnd", function () {
    });

    //Hide/delete row on click.
    $("#userTable img").click(function () { $(this).parent().parent().hide(); });
});
</script>
<p>
<%: Html.ActionLink("Create New", "Create") %>
</p>
<table id="userTable" class="tablesorter" style="height: 100%">
<thead>
<tr>
    <th>
        ID
    </th>
    <th>
        UserName
    </th>
    <th>
        Gender
    </th>
    <th>
        Country
    </th>
    <th>
        Edit
    </th>
    <th>
        Details
    </th>
    <th>
        Delete
    </th>
</tr>
</thead>
<% foreach (var item in Model)
   { %>
<tr>
    <td>
        <%: item.ID %>
    </td>
    <td>
        <%: item.UserName %>
    </td>
    <td>
        <%: item.Gender %>
    </td>
    <td>
        <%: item.Country %>
    </td>
    <td>
        <%: Html.ActionLink("Edit", "Edit", new {id=item.ID  }) %>
    </td>
    <td>
        <%: Html.ActionLink("Details", "Details", new { id = item.ID })%>
    </td>
    <td>
        <%: Html.ActionLink("Delete", "Delete", new { id = item.ID })%>
    </td>
</tr>
<% } %>
</table>
<div id="pager" class="pager">
<br />
<img src="../../Content/arrow-left.png" class="first"  />
<img src="../../Content/arrow-left.png" class="prev"  />
<input type="text" class="pagedisplay" />
<img src="../../Content/arrow-right.png" class="next"   />
<img src="../../Content/arrow-right.png" class="last"   />
<select class="pagesize">
    <option selected="selected" value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
</div>
</asp:Content>

HostForLIFE.eu ASP.NET MVC 6 Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.