Introduction

Bootstrap Sortable is a jQuery extension for Bootstrap that adds the capability of sorting rows of your Bootstrap tables.
Features:
Create a new project using "File", "New", then "Project". Select Web, then "ASP.NET Web Application". Name it “BootstrapSortableApplication".
ASP.NET Web Application
You can see New ASP.NET Project dialog for ASP.NET 4.6 templates. Select a template, MVC, then click OK.
MVC
Now, view Solution Explorer, Content and Scripts.
Solution Explorer
Now, Tools click on the Nuget Package Manager > Package Manager Console.
Nuget Package Manager
To install bootstrap-sortable, run the following command in the Package Manager Console.
Install-Package Moment.js
To configure a default page, you can go to App_Start > BundleConfig.cs. From there you should be able to see something like the following,
BundleConfig.cs
  1. bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
  2. "~/Scripts/bootstrap.js",
  3. "~/Scripts/bootstrap.min.js",
  4. "~/Scripts/moment.min.js",
  5. "~/Scripts/bootstrap-sortable.js",
  6. "~/Scripts/respond.js"));
  8. bundles.Add(new StyleBundle("~/Content/css").Include(
  9. "~/Content/bootstrap.min.css",
  10. "~/Content/bootstrap-sortable.css",
  11. "~/Content/site.css"));
Select the ADO.NET Entity Data Model,
Entity Data Model
Now click Add to continue and on the next step select “EF Designer from database” since we will use the database first approach to work with existing database.
EF Designer from Database
Here click on New Connection and then enter your SQL Server details. After that select your database.
New Connection
In the next step click on the “New Connection” button and then select “Microsoft SQL Server SqlClient” as the data source and then click Next. You should see this dialog below:
Microsoft SQL Server SqlClient
You should now see the following dialog: Yes > Next.
Next
Now select the table that you want to use in your application. For this example, I selected all the tables because we will use those in our application. Clicking the Finish button will generate the Entity Model for you as in the following image,
Entity Model
Now, go to Models, then click Add and Class.
Add Class
Now, Add New Item, select class MstEmployee.cs and then Add.
Class
Applying Models attributes to the MstEmployee class.
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. namespace BootstrapSortableApplication.Models
  6. {
  7. public class MstEmployee
  8. {
  9. public int EmployeeID
  10. {
  11. get;
  12. set;
  13. }
  14. public string LastName
  15. {
  16. get;
  17. set;
  18. }
  19. public string FirstName
  20. {
  21. get;
  22. set;
  23. }
  24. public string Name
  25. {
  26. get;
  27. set;
  28. }
  29. public string Title
  30. {
  31. get;
  32. set;
  33. }
  34. public DateTime ? BirthDate
  35. {
  36. get;
  37. set;
  38. }
  39. public DateTime ? HireDate
  40. {
  41. get;
  42. set;
  43. }
  44. public string Address
  45. {
  46. get;
  47. set;
  48. }
  49. public string City
  50. {
  51. get;
  52. set;
  53. }
  54. public string Region
  55. {
  56. get;
  57. set;
  58. }
  59. public string PostalCode
  60. {
  61. get;
  62. set;
  63. }
  64. public string Country
  65. {
  66. get;
  67. set;
  68. }
  69. }
  70. }
Now here's the code block for “HomeController”
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Mvc;
  6. using BootstrapSortableApplication.Models;
  7. namespace BootstrapSortableApplication.Controllers
  8. {
  9. public class HomeController: Controller
  10. {
  11. public ActionResult Index()
  12. {
  13. List < MstEmployee > qry = new List < MstEmployee > ();
  14. using(NorthwindEntities dc = new NorthwindEntities())
  15. {
  16. qry = (from s in dc.Employees select new MstEmployee
  17. {
  18. EmployeeID = s.EmployeeID,
  19. Name = s.FirstName + " " + s.LastName,
  20. Title = s.Title,
  21. BirthDate = s.BirthDate,
  22. HireDate = s.HireDate,
  23. Address = s.Address,
  24. City = s.City,
  25. Region = s.Region,
  26. PostalCode = s.PostalCode,
  27. Country = s.Country,
  28. }).ToList();
  29. }
  30. return View(qry);
  31. }
  32. }
  33. }
Index.cshtml
  1. @model IEnumerable<BootstrapSortableApplication.Models.MstEmployee>
  2. @{
  3. ViewBag.Title = "Home Page";
  5. }
  6. <br />
  8. <div class="table-responsive">
  9. <table class="table table-bordered table-condensed table-striped table-hover sortable">
  10. @if (Model.Count() == 0)
  11. {
  12. <tr>
  13. <td colspan="10">No Record's found.</td>
  14. </tr>
  15. }
  16. else
  17. {
  18. <thead>
  19. <tr class="danger">
  20. <th data-defaultsign="_19"> Employee ID</th>
  21. <th data-defaultsign="AZ">Name</th>
  22. <th data-defaultsign="AZ">Title</th>
  23. <th data-defaultsign="month">Birth Date</th>
  24. <th data-firstsort="desc">Address</th>
  25. <th data-defaultsign="AZ">City</th>
  26. <th data-defaultsort="disabled">Country</th>
  27. </tr>
  28. </thead>
  29. foreach (var item in Model)
  30. {
  31. <tr>
  32. <td>@item.EmployeeID</td>
  33. <td>@item.Name</td>
  34. <td>@item.Title</td>
  35. <td>@item.BirthDate</td>
  36. <td>@item.Address</td>
  37. <td>@item.City</td>
  38. <td>@item.Country</td>
  39. </tr>
  40. }
  41. }
  42. </table>
  43. </div>
Now run the page, it will look like this: Home/Index.
Home
Now run the page, it sorts table data by numbers Employee ID data-defaultsign="_19".
Employee ID
Now run the page, Name Sorts table data alphabetically data-defaultsign="AZ".
data alphabetically
Now run the page, Title Sorts table data alphabetically data-defaultsign="AZ".
alphabetically
Now run the page, Sorts table data by dates. Birth Date data-defaultsign="month",
Birth Date
Now run the page, Custom sorting signs Address data-firstsort="desc".
run
Now run the page, allows to disable sorting for a specific table column Country data-defaultsort="disabled".
run the page
I hope this article is useful. If you have any other questions, then please provide your comments below.