Jquery DataTable 客户端分页、搜索、过滤以及使用 Version 1.10.24 的服务器端数据

Jquery DataTable client side pagination, searching, filtering along with a server side data using Version 1.10.24

提问人:Ubaid Ur Rehman 提问时间:6/2/2021 更新时间:6/2/2021 访问量:2377

问:

亲爱的研究员们,在使用服务器端数据时,我无法找到带有客户端分页、排序和搜索的 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;
        }

    }

C# .net-core datatables 服务器端 客户端

评论

0赞 andrewJames 6/2/2021
使用 时,将所有筛选、排序和分页逻辑委托给服务器。在这种情况下,没有“客户端分页”这样的东西。"serverSide": true

答: 暂无答案