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”>

}

Advertisements

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ả.

Phân trang với ASP.NET MVC

Sau khi tạo dự án ASP.NET MVC, dùng Nuget Package để cài đặt PagedList.Mvc

Viết lại Action method của controller phân trang như sau

public ActionResult Index(string currentFilter, string searchString, int? page)
{

if (searchString != null)
{
page = 1;
}
else
{
searchString = currentFilter;
}

ViewBag.CurrentFilter = searchString;
var visas = db.VISAs.ToList();

if (!String.IsNullOrEmpty(searchString))
{
visas = visas.Where(s => s.TEN.Contains(searchString)
|| s.TO_CHUC.Contains(searchString)).ToList();
}

visas.OrderByDescending(v => v.ID);

int pageSize = 5;
int pageNumber = (page ?? 1);
return View(visas.ToPagedList(pageNumber, pageSize));

}

Mở trang index.cshtml và chỉnh sửa đoạn code phân trang như sau

@model PagedList.IPagedList<QLHSCV.WebUI.Models.VISA>
@using PagedList.Mvc;
<link href=”~/Content/PagedList.css” rel=”stylesheet” type=”text/css” />

Chèn thêm phần phân trang ở của trang html

Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount

@Html.PagedListPager(Model, page => Url.Action(“Index”,
new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }))