using jquery datatable for server side processing with paging, filtering and search [closed]
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 21 days ago.
Improve this questionI need to use the jquery datatabl开发者_开发技巧e server-side processing (http://datatables.net) for my asp.net mvc (C#) application.
My application has thousands of records to show in the table as list. I am using jquery datatable to enable paging, filtering and search.
Is there any good reference/articles for jquery datatable server-side processing to use with asp.net mvc (C#)?
Hi this link may be helpful to you...
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
jQuery code for setup 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# Code (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);
}
}
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.
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;
}
In the official website that you referred, there is a complete reference Here.
I hope that it can help.
I would suggest ALMMa DataTables
精彩评论