Jquery Datatable ASP.NET Gridview 大数据集答案

【问题标题】：Jquery Datatable ASP.NET Gridview Large DataSetJquery Datatable ASP.NET Gridview 大数据集
【发布时间】：2013-04-27 11:19:16
【问题描述】：

我正在使用带有 ASP.NET Gridview 的“DataTables Jquery”...

gridview 非常适合小型数据集，但对于大型数据集（>5000 行），加载需要一些时间，并且在加载网格时加载圈也不会出现..

ASP.NET 伪代码 -

<body id="dt_example">
<form runat=server>
<asp:GridView ID="gv" runat="server" CellPadding="5" CellSpacing="5">
    <RowStyle Wrap="False" />
</asp:GridView>
        </form>
</body>

JavaScript -

<script type='text/javascript' charset='utf-8'>

        $(document).ready(function () {
            $('#gv').dataTable({
                    'bJQueryUI': true,
                    'sPaginationType': 'full_numbers',
                    'bAutoWidth': true
            });
        });
        </script>

代码隐藏 -

protected void Page_Load(object sender, EventArgs e)
    {
        QueryRslt(passType, val);
        gv.HeaderRow.TableSection = TableRowSection.TableHeader;
    }


    public void QueryRslt(string Type, string Value)
    {
        if (!string.IsNullOrEmpty(Type))
        {
            if (Type == "TaskStatus")
            {
                gv.DataSource = tsk
                               .Where(x => x.Status == Value)
                                        .Select(m => new
                                        {
                                            ID = m.Incident_ID,
                                            TaskID = m.Task_ID,
                                            CI = m.CI,
                                            Status = m.Status,
                                            Priority = m.Priority,
                                            ReportedDate = m.Task_Assign_Time,
                                            AssigneeGroup = m.Assignee_Group,
                                            AssignedGroup = m.Assigned_Group,
                                            RespondDate = m.Incident_Responded_Date,
                                            Reason = m.Status_Reason
                                        }).ToList();
                gv.DataBind();
            }
            else if (Type == "IncidentStatus")
            {
                gv.DataSource = inc
                               .Where(x => x.Status == Value)
                                        .Select(m => new
                                        {
                                            ID = m.Incident_ID,
                                            CI = m.CI,
                                            Status = m.Status,
                                            Priority = m.Priority,
                                            ReportedDate = m.Incident_Reported_Date,
                                            AssigneeGroup = m.Assignee,
                                            AssignedGroup = m.Assigned_Group,
                                            RespondDate = m.Incident_Responded_Date,
                                            Reason = m.Status_Reason
                                        }).ToList();
                gv.DataBind();
            }}}

加载的 Gif 出现几分之一秒然后消失...

所以有两件事我想知道 -

显示加载 gif 直到填充整个 gridview..
减少处理数据的时间..

【问题讨论】：

标签： c# jquery asp.net datatables

【解决方案1】：

您可以在代码隐藏中使用 ASP.NET 通用处理程序而不是 ASP.NET GridView 绑定。

喜欢

$('#gv').dataTable({
                'bJQueryUI': true,
                'sPaginationType': 'full_numbers',
                'bAutoWidth': true,
                 'bProcessing': true,
                 'bServerSide': true,
                 'sAjaxSource': '/handlers/handlerName.ashx'
        });

并且处理程序包含

   public class handlerName : IHttpHandler
    {

    public void ProcessRequest(HttpContext context)
        {
            try
            {
                // THOSE PARAMETERS ARE SENT BY THE PLUGIN
                var iDisplayLength = int.Parse(context.Request["iDisplayLength"]);

                ////HOLD DISPLAY START
                var iDisplayStart = int.Parse(context.Request["iDisplayStart"]);

                ////HOLD SORT COLUMN
                var iSortCol = int.Parse(context.Request["iSortCol_0"]);

                ////HOLD SORT DIRECTION SUCH AS ASC AND DESC
                var iSortDir = context.Request["sSortDir_0"];

                ////HOLD SEARCH KEYWORD
                var sSearch = context.Request["sSearch"];             


                var variableToHoldData = className.functionName();

                // DEFINE AN ORDER FUNCTION BASED ON THE ISORTCOL PARAMETER
                Func<variableToHoldData, object> order = p =>
                {
                    //IF SORT COLUMN IS 1, fieldName
                   if (iSortCol == 1)
                   {
                        return p.fieldName2;
                   }
                //    //IF SORT COLUMN IS 2, SORT BY fieldName
                   else if (iSortCol == 2)
                   {
                        return p.fieldName3;
                    }

                    }
                    //SORT BY fieldName
                   return p.fieldName1;
                };
                // DEFINE THE ORDER DIRECTION BASED ON THE ISORTDIR PARAMETER
                variableToHoldData = "desc" == iSortDir ? variableToHoldData.OrderByDescending(order) : variableToHoldData.OrderBy(order);


                // PREPARE AN ANONYMOUS OBJECT FOR JSON SERIALIZATION
                var result = new
                {
                    iTotalRecords = variableToHoldData.Count(),
                    iTotalDisplayRecords = variableToHoldData.Count(),
                    aaData = variableToHoldData

                        //SEARCH BY FIELD NAME
                        .Where(p => p.fieldName1.ToLower().Contains(sSearch.ToLower()) || p.fieldName2.ToLower().Contains(sSearch.ToLower()) || p.fieldName3.ToLower().Contains(sSearch.ToLower()) )

                        //SELECT FIELDS
                        .Select(p => new[] { p.fieldName1.ToString(), p.fieldName2.ToString(), p.fieldName3.ToString() })
                        .Skip(iDisplayStart)
                        .Take(iDisplayLength)

                };

                var serializer = new JavaScriptSerializer();

                //CONVERT RESULT INTO JSON
                var json = serializer.Serialize(result);
                context.Response.ContentType = "application/json";
                context.Response.Write(json);

            }
            catch (Exception)
            {

                throw;
            }

        }
           public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }   



    public class className
    {
        public string fieldName1 { get; set; }
        public string fieldName2 { get; set; }
        public string fieldName3 { get; set; }


        public static IEnumerable<className> functionName()
        {


            //RETURN DATA FROM SOURCE
            DT= obj.ReturnData();

            //CHECK CANDIDATE PROFILE DATATABLE  IS NULL
            if (DT != null && DT.Rows.Count > 0)
            {

                foreach (DataRow row in DT.Rows)
                {
                    yield return new className
                    {



                        fieldName1 = row["columnName1"].ToString(),


                        fieldName1 = row["columnName2"].ToString(),


                        fieldName1 = row["columnName3"].ToString(),                 


                    };
                }
            }

        }

    }
        }

【讨论】：

有什么解决方案我不改变 GridView.. 我想在所有情况下都保留 gridView