ASP.NET MVC – Sử dụng DataTable

Dưới đây là hướng dẫn cách sử dụng DataTable 

How to Install DataTable

Bước 1 – Thay đổi trong _Layout.cshtml

Mở _layout.cshtml và bổ sung phần sau trong phần

<head>


@RenderSection(“css”, false)

</head>

Trước thẻ </body> bổ sung thêm đoạn mã sau

@RenderSection(“scripts”, required: false)
</body>

Bước 2 – Thêm mã trong index.cshtml

Thiết lập ID cho bảng và class

<table class=”display” id=”table_id”>

<thead>

<tr>

Phần heading của bảng phải để trong <thead>

Phần nội dung hiển thị dữ liệu phải khai báo trong phần <tbody>

<tbody>

@foreach (var item in Model)

{

Bước 3 – Chèn thêm đoạn code sau trong phần view

@section scripts

{

//cdn.datatables.net/1.10.12/js/jquery.dataTables.js

$(document).ready(function () {

$(‘#table_id’).DataTable();

});

}

@section css

{

<link rel=”stylesheet” type=”text/css” href=”//cdn.datatables.net/1.10.12/css/jquery.dataTables.css”>

}

ASP.NET MVC Search and Paging

Đoạn code dưới đây hướng dẫn cách thiết lập chức năng Search & Paging (tìm kiếm và phân trang) trong asp.net mvc:

1. Install PageList

  • Click chuột phải trên Project và chọn Manage NuGet Packages…
  • Gõ tìm PagedList.mvc
  • Click chọn và Install để cài đặt thư viện vào project

3. Controller

public ActionResult Index(string searchString, int? page)
{
int recordsPerPage = 5;

if (!page.HasValue)
{
page = 1; // set initial page value
}
ViewBag.Keyword = searchString;

var products = db.Products.ToList();
try
{
if (!String.IsNullOrEmpty(searchString))
{
products = products.Where(s => s.ProductName.Contains(searchString)).ToList();
}
}
catch (Exception ex) { }
products.OrderByDescending(v => v.ProductId);

var finalList = products.ToPagedList(page.Value, recordsPerPage);
return View(finalList);
}

3. View

Sửa View index để mã như sau, chép từ đầu và ghi đè thay thế code trong view từ đầu đến ngay trước <table class=”table”>

@using PagedList;
@using PagedList.Mvc;
@model IPagedList<DataAccessDemoApp.Models.Product>
@{
ViewBag.Title = “Index”;
}
<h2>Index</h2>
<p>
@Html.ActionLink(“Create New”, “Create”)
</p>
@using (Html.BeginForm(“Index”, “Products”, FormMethod.Get))
{
<p>
Find by name: <input type=”text” name=”searchString” value=”@ViewBag.Keyword” />
<input type=”submit” value=”Search” />
</p>
}
<table class=”table”>

Chèn thêm đoạn sau vào cuối view Index.cshtml

@Html.PagedListPager(Model, page => Url.Action(“Index”, new
{
page,
searchString = ViewBag.Keyword
}),
PagedListRenderOptions.PageNumbersOnly)

Nhấn F5 để chạy thử và kiểm tra kết quả.