首页 文章

用于服务器端处理的数据表,具有分页,过滤和搜索功能

提问于
浏览
0

我需要为我的asp.net(C#)Web站点使用jquery datatable服务器端处理(http://datatables.net) .

我的网站有数千条记录在表格中显示为列表 . 我正在使用jquery datatable服务器端来启用分页,过滤和搜索 .

是否有任何关于jquery数据服务器端处理的好参考/文章与asp.net(C#)一起使用?

2 回答

  • 0

    发送到控制器的参数以及需要返回的值在此处的文档中定义http://datatables.net/manual/server-side

    使用如下签名设置.net endpoints :

    public JsonResult GetResultDtData(
            int draw, 
            int start, 
            int length,
            Dictionary<string, string> search, 
            List<Dictionary<string,string>> order, 
            List<Dictionary<string, string>> )
    

    然后,您可以使用这些参数来确定需要发送回的数据 . 可以使用Skip()和Take()完成分页

    IEnumerable theDataToReturn = GetMyDataFromDB();
    DataTablesReturnData dtReturn = new DataTablesReturnData()
    {
      draw = draw,
      recordsTotal = theDataToReturn.Count,
      recordsFiltered = theDataToReturn.Count,
      data = getData().Skip(start).Take(length).ToList()
    };
    
    return dtReturn;
    

    过滤和排序有点复杂,但您需要的所有信息都存储在初始参数(搜索,顺序和列)中 .

  • 0

    我会参考这篇文章jQuery Datatable server side pagination and sorting 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);
            }
        }
    

相关问题