ASP MVC 中的 Jquery dataTables serverSide
Posted
技术标签:
【中文标题】ASP MVC 中的 Jquery dataTables serverSide【英文标题】：Jquery dataTables serverSide in ASP MVC 【发布时间】：2019-04-24 00:14:18 【问题描述】：我试过了，但我认为我仍然需要修复我的控制器
我需要将数据从我的数据库中获取到数据表中
这是我的桌子和我的 js
<table id="myTable" class="display nowrap" style="width:100%">
<thead>
<tr>
<th>Status</th>
<th>Date and Time</th>
<th>Comments</th>
</tr>
</thead>
</table>
我的Js
<!--Import jQuery before export.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!--Data Table-->
<script type="text/javascript" src=" https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src=" https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>
<!--Export table buttons-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.print.min.js"></script>
<!--Export table button CSS-->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css">
<script type="text/javascript">
$(document).ready(function ()
$.noConflict();
$('#myTable').DataTable(
"ajax":
"url": "/Profile/Index/viewModel/EmployeeCollection/HistoryOfStatuses",
"type": "POST",
"datatype": "json"
,
"columns": [
"data": "CheckStatus", "name": "Status" ,
"data": "CheckTime", "name": "Date and Time"
],
"serverSide": "true",
"order": [0, "asc"],
dom: 'Bfrtip',
buttons: [
'copy', 'pdf', 'csv', 'print', 'excel'
]
);
);
我的控制器看起来像这样在这个数据表中我需要使用 HistoryOfStatuses
public IActionResult Index(int? Id)
using (var context = new RSAT.Api.Data.Proxy.ATT2018NOVUSContext())
var baseViewModel = base.GetLayoutViewModel();
var viewModel = new HomeViewModel()
User = baseViewModel.User,
RoleCollection = baseViewModel.RoleCollection,
TableCollection = baseViewModel.TableCollection,
//Olap = baseViewModel.Olap,
//Localization = baseViewModel.Localization,
EmployeeCollection = (from userinfo in context.Userinfo
where userinfo.Userid == Id
join department in context.Dept on userinfo.Deptid equals department.Deptid
select new Employee()
Id = userinfo.Userid,
Name = userinfo.Name,
Picture = userinfo.Picture,
Department = department.DeptName,
CardNumber = userinfo.CardNum,
Status = userinfo.UserFlag.ToString(),
ActualCheckinStatuse = (from checkinout in context.Checkinout
join status in context.Status on checkinout.CheckType equals status.Statusid
where checkinout.Userid == userinfo.Userid
orderby checkinout.CheckTime descending
select new Checkinout
CheckStatus = status.StatusText,
CheckTime = checkinout.CheckTime
).FirstOrDefault(),
HistoryOfStatuses = (from checkinout in context.Checkinout
join status in context.Status on checkinout.CheckType equals status.Statusid
where checkinout.Userid == userinfo.Userid
orderby checkinout.CheckTime descending
select new Checkinout
CheckStatus = status.StatusText,
CheckTime = checkinout.CheckTime
).ToList(),
TodayCheckedStatus = (from checkinout in context.Checkinout
join status in context.Status on checkinout.CheckType equals status.Statusid
where checkinout.Userid == userinfo.Userid
where checkinout.CheckTime.Date == DateTime.Today.Date
orderby checkinout.CheckTime descending
select new Checkinout
CheckStatus = status.StatusText,
CheckTime = checkinout.CheckTime
).ToList()
).ToList()
;
return View(viewModel);
这是我要使用的班级员工控制器。
public class Employee : BaseEntity
public Employee()
this.HistoryOfStatuses = new List<Checkinout>();
this.TodayCheckedStatus = new List<Checkinout>();
public string Name get; set;
public string Department get; set;
public string CardNumber get; set;
public string Status get; set;
public byte[] Picture get; set;
public Checkinout ActualCheckinStatuse get; set;
public List<Checkinout> HistoryOfStatuses get; set;
public List<Checkinout> TodayCheckedStatus get; set;
public int UserId get; internal set;
public string UName get; set;
public string UField get; set;
public string UDeg get; set;
//test
我需要使用数据表对pdf和exel中的数据进行排序和下载。
【问题讨论】：
嗨..你确定要返回 View(viewModel) 吗？ .. 不是 Jsonresult(viewModel) 吗？ 您的 AJAX URL 在这里似乎是错误的。也不需要返回视图模型的所有实例，因为数据表中只有 2 列。 【参考方案1】：您正在数据表中显示状态列表，但您正在返回员工viewModel，我认为您需要检查您的代码并返回正确的数据。就像下面的代码
return Json(new
draw = model.draw,
recordsTotal = viewModel.HistoryOfStatuses.Count(),
recordsFiltered = viewModel.HistoryOfStatuses.Count(),
data = viewModel.HistoryOfStatuses
, JsonRequestBehavior.AllowGet);
您可以查看链接Sample implementation of serverside processing in C# MVC
【讨论】：
【参考方案2】：这就是我修复它的方法我的控制器
[HttpPost]
public string GetData()
string sJSONResponse = "";
List<string> data = new List<string>();
using (var context = new RSAT.Api.Data.Proxy.ATT2018NOVUSContext())
var baseViewModel = (from userinfo in context.Userinfo
join department in context.Dept on userinfo.Deptid equals department.Deptid
select new
Id = userinfo.Userid,
Name = userinfo.Name,
Department = department.DeptName,
CardNumber = userinfo.CardNum,
Status = userinfo.UserFlag.ToString(),
HistoryOfStatuses = (from checkinout in context.Checkinout
join status in context.Status on checkinout.CheckType equals status.Statusid
where checkinout.Userid == userinfo.Userid
orderby checkinout.CheckTime descending
select new Checkinout
CheckStatus = status.StatusText,
CheckTime = checkinout.CheckTime
).ToList(),
).ToList();
foreach (var i in baseViewModel)
foreach (var h in i.HistoryOfStatuses)
var s = "[\"" + h.CheckStatus + "\"," + "\"" + h.CheckTime + "\"]";
data.Add(s);
string dataRez = "[";
foreach (var i in data)
dataRez += i + ",";
dataRez = dataRez.Remove(dataRez.Length - 1);
dataRez = dataRez + "]";
sJSONResponse = "\"draw\": 1,\"recordsTotal\": 57,\"recordsFiltered\": 57,\"data\":" + dataRez + "";
return sJSONResponse;
还有我的脚本
<!--Import jQuery before export.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!--Data Table-->
<script type="text/javascript" src=" https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src=" https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>
<!--Export table buttons-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.print.min.js"></script>
<!--Export table button CSS-->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css">
<script type="text/javascript">
$(document).ready(function ()
$.noConflict();
$('#myTable1').DataTable(
"ajax":
"url": "/Profile/GetData",
"type": "POST",
"datatype": "application/json"
,
"serverSide": "true",
"order": [0, "asc"],
"processing": "true",
dom: 'Bfrtip',
buttons: [
'copy', 'pdf', 'csv', 'print', 'excel'
]
);
);
</script>
【讨论】：
以上是关于ASP MVC 中的 Jquery dataTables serverSide的主要内容，如果未能解决你的问题，请参考以下文章
Asp.Net MVC 中的 JQuery UI 日期选择器
使用 JavaScript/jQuery 重定向到 ASP.NET MVC 中的另一个页面
使用母版页的 ASP.net MVC 应用程序中的 jQuery