我需要爲我的asp.net mvc(C#)應用程序使用jQuery數據表服務器端處理(http://datatables.net)。使用jQuery數據表進行分頁,過濾和搜索服務器端處理
我的應用程序有數千條記錄在表中顯示爲列表。我正在使用jQuery數據表來啓用分頁,過濾和搜索。
是否有任何好的參考/文章的jQuery數據表服務器端處理使用asp.net mvc(C#)?
我需要爲我的asp.net mvc(C#)應用程序使用jQuery數據表服務器端處理(http://datatables.net)。使用jQuery數據表進行分頁,過濾和搜索服務器端處理
我的應用程序有數千條記錄在表中顯示爲列表。我正在使用jQuery數據表來啓用分頁,過濾和搜索。
是否有任何好的參考/文章的jQuery數據表服務器端處理使用asp.net mvc(C#)?
我目前正在處理類似的問題。你知道第一個鏈接是否仍然是處理這個問題的最佳方法嗎? – PFranchise 2012-11-01 15:36:38
哈哈,也許「最好的方式」不是一個可以回答的問題。但是,我想我只是說,你會建議有人仍然使用這種方法嗎? – PFranchise 2012-11-01 15:47:04
https://github.com/johannes-brunner/DataTables-ASP.NET-MVC
這是一個例子項目,你可以下載它,並通過調試得到怎樣的數據表的感覺可與.NET MVC 。 它幫助我找到了主題。
嗨此鏈接可能對你有幫助...
http://www.dotnetawesome.com/2015/11/jquery-datatable-server-side-pagination-sorting.html
下面的文章關於jQuery的數據表中的服務器端分頁和ASP.NET MVC整理,解釋在asp.net mvc(C#)作爲服務器端的一步一步 我會參考這篇文章[jQuery Datatable服務器端分頁和排序在ASP.NET MVC
jQu ERY代碼設置的jQuery Datables
<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);
}
}
我怎樣才能得到特定的專欄,比如說「縣」 – 2017-01-18 12:39:22
請遵循本準則它非常簡單
<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;
}
我會建議https://www.echosteg.com/jquery-datatables-asp.net-mvc5-server-side – cynx 2017-01-11 18:02:26