c# - Jquery Datatable ASP.NET Gridview Large DataSet -
i using "datatables jquery" asp.net gridview...
the gridview works fine small datasets large datasets (>5000 rows) takes time load , while grid loading loading circle not appear..
asp.net pseudocode -
<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> code behind -
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(); }}} the loading gif appear fraction of second , disappears...
so there 2 things want know -
display loading gif until whole gridview populated..
decrease time of processing data..
you can use asp.net generic handlers instead of asp.net gridview binding in code-behind.
like
$('#gv').datatable({ 'bjqueryui': true, 'spaginationtype': 'full_numbers', 'bautowidth': true, 'bprocessing': true, 'bserverside': true, 'sajaxsource': '/handlers/handlername.ashx' }); and handler contains
public class handlername : ihttphandler { public void processrequest(httpcontext context) { try { // parameters sent 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 asc , desc var isortdir = context.request["ssortdir_0"]; ////hold search keyword var ssearch = context.request["ssearch"]; var variabletoholddata = classname.functionname(); // define order function based on isortcol parameter func<variabletoholddata, object> order = p => { //if sort column 1, fieldname if (isortcol == 1) { return p.fieldname2; } // //if sort column 2, sort fieldname else if (isortcol == 2) { return p.fieldname3; } } //sort fieldname return p.fieldname1; }; // define order direction based on isortdir parameter variabletoholddata = "desc" == isortdir ? variabletoholddata.orderbydescending(order) : variabletoholddata.orderby(order); // prepare anonymous object json serialization var result = new { itotalrecords = variabletoholddata.count(), itotaldisplayrecords = variabletoholddata.count(), aadata = variabletoholddata //search 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 json var json = serializer.serialize(result); context.response.contenttype = "application/json"; context.response.write(json); } catch (exception) { throw; } } public bool isreusable { { 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 source dt= obj.returndata(); //check candidate profile datatable 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(), }; } } } } }
Comments
Post a Comment