01/10/2018, 16:04
Thắc mắc khi sử dụng thư viện datatable
mình có làm theo bài hướng dẫn này về sách sử dụng thư viện datatable
Using DataTables Grid With ASP.NET MVC
In this article, we are going to learn how to use DataTables Grid with ASP.NET MVC in step by step way.
code của mình đây : ở phía clinet
{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="https://daynhauhoc.com//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap4.min.js "></script>
<script>
$("document").ready(function () {
$("#demoGrid").DataTable({
"processing": true, //for show pro
"serverSide": true,
"filter": true,
"orderMulti": true,
"pageLength": 5,
"order": [[0, 'asc'], [1, 'asc']],
"ajax": {
"url": "/Demo/LoadData",
"type": "POST",
"dataType": "json"
},
"columns": [
{ "data": "NameStyle", "name": "NameStyle", "title": "Name Style", "autoWidth": true },
{ "data": "Title", "name": "title", "title": "Title", "autoWidth": true },
{ "data": "FirstName", "name": "FirstName", "title": "First Name", "autoWidth": true },
{ "data": "MiddleName", "name": "MiddleName", "title": "Middel Name", "autoWidth": true },
{ "data": "LastName", "name": "LastName", "title": "Last Name", "autoWidth": true },
{ "data": "Suffix", "name": "Suffix", "title": "Suffix", "autoWidth": true },
{ "data": "EmailPromotion", "name": "EmailPromotion", "title": "Email", "autoWidth": true }
]
});
});
</script>
</head>
<body>
<div>
<div style="width:90%; margin:0 auto;">
<table id="demoGrid" class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0">
<thead>
<tr>
<th>Name Style</th>
<th>Title</th>
<th>First Name</th>
<th>Middel Name</th>
<th>Last Name</th>
<th>Suffix</th>
<th>Email</th>
</tr>
</thead>
</table>
</div>
</div>
</body>
</html>
ở phía phần server xử lý như sau
public ActionResult LoadData()
{
try
{
using (AdventureWorks2016CTP3Entities _entities = new AdventureWorks2016CTP3Entities())
{
var draw = Request.Form.GetValues("draw").FirstOrDefault();
var start = Request.Form.GetValues("start").FirstOrDefault();
var length = Request.Form.GetValues("length").FirstOrDefault();
var sortColumn = Request.Form
.GetValues("columns[" + Request.Form.GetValues("order[0][column]").FirstOrDefault() + "][name]")
.FirstOrDefault();
var sortColumnDir = Request.Form.GetValues("order[0][dir]").FirstOrDefault();
var searchValue = Request.Form.GetValues("search[value]").FirstOrDefault();
var test = Request.Form.GetValues("order[0][column]").FirstOrDefault();
//paging Size
int pageSize = length != null ? Convert.ToInt32(length) : 0;
int skip = start != null ? Convert.ToInt32(start) : 0;
int recordsTotal = 0;
//getting all Prson
var listPerson = (from sa in _entities.People
select sa);
//Sorting
if (!(string.IsNullOrEmpty(sortColumn) && string.IsNullOrEmpty(sortColumnDir)))
{
listPerson = listPerson.OrderBy(sortColumn + " " + sortColumnDir);
}
if (!string.IsNullOrEmpty(searchValue))
{
listPerson = listPerson.Where(s => s.FirstName == searchValue);
}
//total number of list
recordsTotal = listPerson.Count();
//Paging
var data = listPerson.Skip(skip).Take(pageSize).ToList(); ;
return Json(new { draw = draw, recordsFiltered = recordsTotal, recordTotal = recordsTotal, data = data });
}
}
catch (Exception)
{
throw;
}
}
khi mình sử dụng thư viên datatable thì để lấy về giá trị của cột nào được sort thì có dòng code như sau
var sortColumn = Request.Form
.GetValues("columns[" + Request.Form.GetValues("order[0][column]").FirstOrDefault() + "][name]")
.FirstOrDefault();
và thực sự mình vẫn chưa hiểu lắm tại sao phải luôn luôn order[0] thì mới get được xem cột nào cần được sort
nếu mình thử thay thế cột order[0] thành order[1] thì sẽ có giá trị là null thực sự mình chưa thông đoạn này lắm .bạn nào thông cho mình phát .Thanh you @Hao
https://datatables.net/manual/server-side
Bài liên quan
Nếu được thì bạn nên post code dài hơn 1 chút: cái datatable của bạn ra sao chứ nhìn như vậy thì không thể nào lần ra được
Theo https://datatables.net thì: order[i] - is an array defining how many columns are being ordered upon - i.e. if the array length is 1, then a single column sort is being performed, otherwise a multi-column sort is being performed. tức là biến order được truyền qua lại giữa Client và Server luôn là 1 array + cái demo của https://www.c-sharpcorner.com set orderMulti = false => Cái array này luôn có 1 phần tử nên chỉ có order[0] mới có value
Nhưng trong ví dụ của bạn ở trên thì orderMulti của bạn đã được set bằng true thì mình chưa rõ là code hiện tại có chạy giống demo không. Như vậy là đủ để trả lời câu hỏi của bạn chưa nhỉ