使用 jquery 数据表进行分页、过滤和搜索的服务器端处理
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3193930/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
using jquery datatable for server side processing with paging, filtering and search
提问by Prasad
I need to use the jquery datatable server-side processing (http://datatables.net) for my asp.net mvc (C#) application.
我需要为我的 asp.net mvc (C#) 应用程序使用 jquery 数据表服务器端处理 ( http://datatables.net)。
My application has thousands of records to show in the table as list. I am using jquery datatable to enable paging, filtering and search.
我的应用程序有数千条记录以列表形式显示在表中。我正在使用 jquery 数据表来启用分页、过滤和搜索。
Is there any good reference/articles for jquery datatable server-side processing to use with asp.net mvc (C#)?
是否有关于 jquery 数据表服务器端处理与 asp.net mvc (C#) 一起使用的好的参考/文章？
回答by Rafael Emshoff
https://github.com/johannes-brunner/DataTables-ASP.NET-MVC
https://github.com/johannes-brunner/DataTables-ASP.NET-MVC
This is an example project, you can download it and by debugging get a feel for how DataTables works with .NET MVC. It helped me get find footing in the topic.
这是一个示例项目，您可以下载它并通过调试了解 DataTables 如何与 .NET MVC 一起工作。它帮助我找到了该主题的立足点。
回答by Sourav Mondal
Hi this link may be helpful to you...
您好，此链接可能对您有所帮助...
http://www.dotnetawesome.com/2015/11/jquery-datatable-server-side-pagination-sorting.html
http://www.dotnetawesome.com/2015/11/jquery-datatable-server-side-pagination-sorting.html
Here the article about jQuery Datatable server side pagination and sorting in ASP.NET MVC , explained step by step in asp.net mvc (C#) as server dside I will refer this article [jQuery Datatable server side pagination and sorting in ASP.NET MVC
这里是关于 ASP.NET MVC 中的 jQuery Datatable 服务器端分页和排序的文章，在 asp.net mvc (C#) as server dside 中逐步解释我将参考这篇文章 [jQuery Datatable server side pagination and sort in ASP.NET MVC
jQuery code for setup jQuery Datables
用于设置 jQuery Datables 的 jQuery 代码
<script>
$(document).ready(function () {
$("#myTable").DataTable({
"processing": true, // for show progress bar
"serverSide": true, // for process server side
"filter": false, // this is for disable filter (search box)
"orderMulti": false, // for disable multiple column at once
"ajax": {
"url": "/home/LoadData",
"type": "POST",
"datatype": "json"
},
"columns": [
{ "data": "ContactName", "name": "ContactName", "autoWidth": true },
{ "data": "CompanyName", "name": "CompanyName", "autoWidth": true },
{ "data": "Phone", "name": "Phone", "autoWidth": true },
{ "data": "Country", "name": "Country", "autoWidth": true },
{ "data": "City", "name": "City", "autoWidth": true },
{ "data": "PostalCode", "name": "PostalCode", "autoWidth": true }
]
});
});
</script>
ASP.NET C# Code (MVC)
ASP.NET C# 代码 (MVC)
[HttpPost]
public ActionResult LoadData()
{
var draw = Request.Form.GetValues("draw").FirstOrDefault();
var start = Request.Form.GetValues("start").FirstOrDefault();
var length = Request.Form.GetValues("length").FirstOrDefault();
//Find Order Column
var sortColumn = Request.Form.GetValues("columns[" + Request.Form.GetValues("order[0][column]").FirstOrDefault() + "][name]").FirstOrDefault();
var sortColumnDir = Request.Form.GetValues("order[0][dir]").FirstOrDefault();
int pageSize = length != null? Convert.ToInt32(length) : 0;
int skip = start != null ? Convert.ToInt32(start) : 0;
int recordsTotal = 0;
using (MyDatatableEntities dc = new MyDatatableEntities())
{
var v = (from a in dc.Customers select a);
//SORT
if (!(string.IsNullOrEmpty(sortColumn) && string.IsNullOrEmpty(sortColumnDir)))
{
v = v.OrderBy(sortColumn + " " + sortColumnDir);
}
recordsTotal = v.Count();
var data = v.Skip(skip).Take(pageSize).ToList();
return Json(new { draw = draw, recordsFiltered = recordsTotal, recordsTotal = recordsTotal, data = data }, JsonRequestBehavior.AllowGet);
}
}
回答by Haim Evgi
回答by Zahid Mustafa
Please follow this Code Its very Simple
请遵循此代码它非常简单
<script type="text/javascript">
$(document).ready(function () {
$("#AllUsers").DataTable({
"processing": true, // for show progress bar
"serverSide": true, // for process server side
"filter": true, // this is for disable filter (search box)
"orderMulti": false, // for disable multiple column at once
"ajax": {
"url": "@Url.Content("~/Users/GetAllUsers")",
"type": "POST",
"datatype": "json"
},
"columns": [
{ data: 'UserID', name: 'UserID', "autoWidth": true },
{ data: 'Name', name: 'Name', "autoWidth": true },
{ data: 'Email', name: 'Email', "autoWidth": true },
{ data: 'UserRole', name: 'UserRole', "autoWidth": true },
{ data: 'Status', name: 'Status', "autoWidth": true },
{
data: '', name: '', "autoWidth": true, "orderable": false, mRender: function (data, colo, row) {
return "<i class='fa fa-trash' style='cursor:pointer'></i>";
}
}
]
});
});
And This is Controller method
这是控制器方法
public JsonResult GetAllUsers()
{
JsonResult result = new JsonResult();
try
{
// Initialization.
string search = Request.Form.GetValues("search[value]")[0];
string draw = Request.Form.GetValues("draw")[0];
string order = Request.Form.GetValues("order[0][column]")[0];
string orderDir = Request.Form.GetValues("order[0][dir]")[0];
int startRec = Convert.ToInt32(Request.Form.GetValues("start")[0]);
int pageSize = Convert.ToInt32(Request.Form.GetValues("length")[0]);
// Loading.
List<User> data = _userReps.AllUsers().ToList();
// Total record count.
int totalRecords = data.Count;
// Verification.
if (!string.IsNullOrEmpty(search) &&
!string.IsNullOrWhiteSpace(search))
{
// Apply search
data = data.Where(p => p.FirstName.ToString().ToLower().Contains(search.ToLower()) ||
p.LastName.ToLower().Contains(search.ToLower()) ||
p.EmailID.ToString().ToLower().Contains(search.ToLower()) ||
p.UserRole.UserRoleName.ToLower().Contains(search.ToLower()) ||
p.UserStatus.Name.ToLower().Contains(search.ToLower())
).ToList();
}
// Sorting.
if (!(string.IsNullOrEmpty(order) && string.IsNullOrEmpty(orderDir)))
{
data = data.OrderBy(order + " " + orderDir).ToList();
}
int recFilter = data.Count;
data = data.Skip(startRec).Take(pageSize).ToList();
var modifiedData = data.Select(d =>
new {
UserID= d.UserID,
Name= d.FirstName + " "+ d.LastName,
Email= d.EmailID,
Status= d.UserStatus.Name,
UserRole= d.UserRole.UserRoleName
}
);
// Loading drop down lists.
result = this.Json(new
{
draw = Convert.ToInt32(draw),
recordsTotal = totalRecords,
recordsFiltered = recFilter,
data = modifiedData
}, JsonRequestBehavior.AllowGet);
}
catch (Exception ex)
{
// Info
Console.Write(ex);
}
// Return info.
return result;
}
回答by Varan Sinayee
回答by BeardedMan
I would suggest ALMMa DataTables
我建议使用ALMMa 数据表
