用于服务器端处理的数据表，包括分页、过滤和搜索

Question

我需要为我的 asp.net (C#) 网站使用 jquery 数据table 服务器端处理 (http://datatables.net)。

我的网站有数千条记录显示在 table 列表中。我正在使用 jquery 数据table 服务器端来启用分页、过滤和搜索。

reference/articles jquery 数据 table 服务器端处理是否有任何好的 reference/articles 与 asp.net (C#) 一起使用？

Answer 1

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

使用如下签名设置您的 .net 端点：

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;

过滤和排序有点复杂，但您需要的所有信息都存储在初始参数（搜索、顺序和列）中。

Answer 2

我会参考这篇文章jQuery Datatable server side pagination and sorting in ASP.NET MVC

jQuery 设置代码 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);
        }
    }

用于服务器端处理的数据表，包括分页、过滤和搜索

Datatable for server side processing with paging, filtering and search

javascript

c#

asp.net

datatable

jquery