提问人:Ubaid Ur Rehman 提问时间:6/2/2021 更新时间:6/2/2021 访问量:2377
Jquery DataTable 客户端分页、搜索、过滤以及使用 Version 1.10.24 的服务器端数据
Jquery DataTable client side pagination, searching, filtering along with a server side data using Version 1.10.24
问:
亲爱的研究员们,在使用服务器端数据时,我无法找到带有客户端分页、排序和搜索的 Jquery 数据表示例,请向我建议解决方案,意思是当我附加示例代码时,到目前为止,我已经使用服务器端过滤分页和搜索所做的工作,搜索并不顺利,就像 jquery datatable 站点中提供的示例一样。
--JsFile 包含代码
$(document).ready(function () {
$("#DomainDatatable").DataTable({
"processing": true,
"serverSide": true,
"filter": true,
"orderMulti": false,
"pageLength": 10,
"deferRender": true,
"scrollY": 500,
"scrollCollapse": true,
"scroller": true,
"ajax": {
"url": "/Domain/GetDomainData",
"type": "POST",
"datatype": "json"
},
"columnDefs": [{
"targets": [0],
"visible": false,
"searchable": false
},
{
"targets": [1],
"searchable": true,
},
{
"targets": [2],
"orderable": true
},
{
"targets": [3],
"searchable": true,
"orderable": false
},
{
"targets": [4],
"searchable": true,
"orderable": false
},
],
"columns": [
{ "data": "id", "name": "Id", "autoWidth": true },
{ "data": "domainName", "name": "DomainName", "autoWidth": true, "searchable": true },
{
data: "createdOn", "name": "CreatedOn", "autoWidth": true,
"render": function (value) {
if (value === null) return "";
return moment(value).format('D-MMM-YYYY hh:mm');
}
},
{ "data": "isActive", "name": "IsActive", "autoWidth": true },
{ "data": "createdByName", "name": "CreatedByName", "autoWidth": true },
{
data: "updatedOn", "name": "UpdatedOn", "autoWidth": true,
"render": function (value) {
if (value === null) return "";
return moment(value).format('D-MMM-YYYY hh:mm');
}
},
{ "data": "updatedByName", "name": "UpdatedByName", "autoWidth": true },
{
"render": function (data, type, full, meta) {
return (
"<button class='btn btn-default btn-xs' style='display:flex;flex-flow:rownowrap;justify-content:center;' onClick='EditForm(" + full.id + ",\"" + full.domainName + "\",\"" + full.isActive + "\" );'>" + "Edit" + "</button>"
);
}
},
]
});
});
控制器包含
public async Task<JsonResult> GetData()
{
try
{
var draw = Request.Form["draw"].FirstOrDefault();
var start = Request.Form["start"].FirstOrDefault();
var length = Request.Form["length"].FirstOrDefault();
var sortColumn = Request.Form["columns[" + Request.Form["order[0][column]"].FirstOrDefault() + "][name]"].FirstOrDefault();
var sortColumnDir = Request.Form["order[0][dir]"].FirstOrDefault();
var searchValue = Request.Form["search[value]"].FirstOrDefault();
//Paging Size (10,20,50,100)
int pageSize = length != null ? Convert.ToInt32(length) : 0;
int skip = start != null ? Convert.ToInt32(start) : 0;
int recordsTotal = 0;
//All User Data
var domain_data = await _iUnitOfWork.DomainRepository.GetData();
//Sorting
if (!(string.IsNullOrEmpty(sortColumn) && string.IsNullOrEmpty(sortColumnDir)))
{
domain_data = domain_data.AsQueryable().OrderBy(sortColumn + " " + sortColumnDir);
}
//Search
if (!string.IsNullOrEmpty(searchValue))
{
domain_data = domain_data.Where(m => m.DomainName == searchValue
|| m.CreatedByName == searchValue || m.IsActive == searchValue);
}
//total number of rows count
recordsTotal = domain_data.Count();
//Paging
var data = domain_data.Skip(skip).Take(pageSize).ToList();
//Returning Json Data
return Json(new { draw = draw, recordsFiltered = recordsTotal, recordsTotal = recordsTotal, data = data });
}
catch (Exception ex)
{
throw ex;
}
}
存储库包含
public async Task<IEnumerable<M.DomainModel>> GetData()
{
try
{
var ur = await DataContext.appUsers.ToListAsync();
IEnumerable<M.DomainModel> result = await DataContext.domains.Include(a=>a.FKCreatedBy).Include(a=>a.FkUpdatedBy).Select(x => new M.DomainModel()
{
Id = x.Id,
DomainName = x.Name,
IsActive = x.IsActive == true ? "Yes" : "No",
CreatedOn = x.CreatedOn,
FkCreatedById = x.FKCreatedById,
CreatedByName = x.FKCreatedBy.UserName,
UpdatedOn = x.UpdatedOn,
FKUpdatedById = x.FKUpdatedById,
UpdatedByName = x.FkUpdatedBy == null ? "" : x.FkUpdatedBy.UserName,
}).ToListAsync();
return result;
}
catch (Exception ex)
{
throw ex;
}
}
答: 暂无答案
评论
"serverSide": true