Jquery Datatable ASP.NET Gridview 大数据集
Posted
技术标签:
【中文标题】Jquery Datatable ASP.NET Gridview 大数据集【英文标题】：Jquery Datatable ASP.NET Gridview Large DataSet 【发布时间】：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..
减少处理数据的时间..
【问题讨论】：
【参考方案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以上是关于Jquery Datatable ASP.NET Gridview 大数据集的主要内容，如果未能解决你的问题，请参考以下文章
在 DataTable Delete 操作中多次发送 Ajax 请求 - ASP.NET、JQuery、Ajax
Jquery Datatable在asp.net核心中使用异步任务方法获取数据
带有复选框控件的 ASP.Net GridView 和 Jquery dataTable
将 jQuery DataTable 插件应用于从 ASP.NET 动态生成的表
asp.net webforms中Jquery Datatable中的分页
如何将 JQuery Datatable.net 与 ASP.Net 4 Razor 和 Twitter Bootstrap 一起使用