使用 jquery 数据表进行服务器端处理，包括分页、过滤和搜索
Posted
技术标签:
【中文标题】使用 jquery 数据表进行服务器端处理，包括分页、过滤和搜索【英文标题】：using jquery datatable for server side processing with paging, filtering and search 【发布时间】：2011-03-12 18:10:51 【问题描述】：我的 asp.net mvc (C#) 应用程序需要使用 jquery 数据表服务器端处理 (http://datatables.net)。
我的应用程序有数千条记录以列表形式显示在表格中。我正在使用 jquery 数据表来启用分页、过滤和搜索。
对于 jquery 数据表服务器端处理与 asp.net mvc (C#) 一起使用，是否有任何好的参考/文章？
【问题讨论】：
我建议echosteg.com/jquery-datatables-asp.net-mvc5-server-side 【参考方案1】：您好，此链接可能对您有所帮助...
http://www.dotnetawesome.com/2015/11/jquery-datatable-server-side-pagination-sorting.html
这里是关于 jQuery Datatable 服务器端分页和排序在 ASP.NET MVC 中的文章，在 asp.net mvc (C#) as server dside 中逐步解释 我会参考这篇文章[jQuery Datatable server side pagination and sort in ASP.NET MVC
用于设置 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# 代码 (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);
【讨论】：
如何获取特定列，例如“县”【参考方案2】：https://github.com/johannes-brunner/DataTables-ASP.NET-MVC
这是一个示例项目，您可以下载它并通过调试了解 DataTables 如何与 .NET MVC 一起使用。 它帮助我在该主题中找到立足点。
【讨论】：
【参考方案3】：2 个链接：
http://weblogs.asp.net/zowens/archive/2010/01/19/jquery-datatables-plugin-meets-c.aspx
http://blogs.msdn.com/b/paulwhit/archive/2009/03/28/walkthrough-full-example-of-using-mvccontrib-grid-with-jquery-datatable.aspx
【讨论】：
我目前正在处理类似的问题。您知道第一个链接是否仍然是处理此问题的最佳方法吗？ 哈哈，也许“最好的方法”不是一个可以回答的问题。但是，我想我的意思是，你会建议有人仍然使用这种方法吗？【参考方案4】：请遵循此代码非常简单
<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>";
]
);
);
这是控制器方法
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;
【讨论】：
您好，如何启用列排序？ 知道我为什么会收到这个错误吗？ IFormCollection 不包含 GetValues 的定义，并且找不到接受 IFormCollection 类型的第一个参数的可访问扩展方法 GetValues【参考方案5】：我建议ALMMa DataTables
【讨论】：
【参考方案6】：在你提到的官网上，有完整的参考Here。
希望对你有帮助。
【讨论】：
对这个答案投反对票的人并没有注意到问题本身正在要求链接：/最好投票结束问题......以上是关于使用 jquery 数据表进行服务器端处理，包括分页、过滤和搜索的主要内容，如果未能解决你的问题，请参考以下文章
DataTables jQuery插件服务器端处理，通过ajax删除后智能分页