mình có làm theo bài hướng dẫn này về sách sử dụng thư viện datatable
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="//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
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?