Question

我在客户端使用datatablejs将数据库显示给客户端。我最初使用backbone indexeddb适配器从服务器下载数据库并将其存储在indexedDB中，以支持对数据的脱机访问。但是，数据表大约需要5分钟才能生成20,000个条目。这是我的JS代码：

render_data: function(entity_collection) {
        //create table body in memory
        tbody = $('<tbody>');
        tbody.html('');

        //iterate over the collection, fill row template with each object 
        //and append the row to table
        entity_collection.each(function(model) {
            tbody.append(this.row_template(model.toJSON()));
        }, this);
        //put table body in DOM
        this.$('#list_table')
            .append(tbody);
        //initialize datatable lib on the table    
        this.$('#list_table')
            .dataTable();
        $("#loaderimg")
            .hide();
        $("#sort-helptext").show();
},

表标题：

<script type="text/template" id="person_table_template"> 
    <tr> 
        <th>Id</th> 
        <th>Name</th> 
        <th>Father Name</th> 
        <th>Village</th> 
        <th>Group</th> 
        <th></th> 
    </tr> 
</script>

转换为html的JSON：

Object {
    age: 45, 
    father_name: "Jiyan Sah ", 
    gender: "F", 
    group: Object, 
    id: 10000000155392, 
    label: "Gangajali Devi (Sahila Rampur,Jiyan Sah )", 
    online_id: 10000000155392, 
    person_name: "Gangajali Devi ", 
    phone_no: "", 
    resource_uri: "/coco/api/v1/person/10000000155392/", 
    village: Object
}

有人可以建议如何提高数据表的性能吗？

Answer 1

首先，不需要在每次迭代时附加数据，你可以在循环后执行一次。

var tmp_str = '';

entity_collection.each(function(model) {
    tmp_str+=this.row_template(model.toJSON())
}, this);

tbody.append(tmp_str);

但是为了真正加快应用程序，我建议你改变渲染方式 - 现在你一次渲染所有数据，并且没有信息监视信息的哪个部分，但客户端。延迟加载可以帮助你 - 例如。如果页面滚动到您渲染的列表的底部+ 100，依此类推前100个项目。

如果您需要一些代码帮助，请与我们联系。

Answer 2

尝试直接从js对象构建数据表（请参阅DataTables Example here），而不是首先构建DOM对象。

也许datatablejs在评估json数组时比分析这样大的DOM对象（并且再次删除大部分对象）更快

通过这种方式，您可以设置"bDeferRender": true，这将导致datatablejs仅呈现可见的行，从而为您提供巨大的速度提升（请参阅the datatablejs features page）

通过使用js数组初始化，您当然会丢失没有JavaScript的用户的HTML回退 - 但我想这不是您的受众; - ）

另请查看disabling CSS height matching 这可以节省一些渲染时间。

Answer 3

如果你想提高速度，可以用Javascript编写自己的函数而不要使用Jquery。

!!!!它首先追加然后添加更快。 !!!!!

使用cloneNode比document.createElement更快，只创建一次并克隆。看看这个并放在html＆lt; body onload =“alert（new Date（）。getTime（） - b）;”＆gt;

生成具有20000个条目的数据表需要700毫秒，当然这取决于机器和数据读取

 var a=new Date().getTime ();
 var table_master=document.createElement ("table");
 var tbody_master=document.createElement ("tbody");
 var tr_master=document.createElement ("tr");
 var td_master=document.createElement ("td");
 var i,u, tr, td;
 document.body.appendChild (table_master);
 table_master.appendChild (tbody_master);

 for (i=0;i<4000;i++)
        {
        tr=tr_master.cloneNode ();
        tbody_master.appendChild(tr);   // check what happens if you put this line after for operation , when you first add the cells with data to tr and then append to the tbody, that would slow down imense
        for (u=0;u<5;u++)
            {
            td=td_master.cloneNode();
            tr.appendChild (td);
            td.appendChild (document.createTextNode("hello"));
            }
        }

Answer 4

嘿兄弟看看这可能对你有帮助-------

客户端代码-----

$("#table-tripNote").dataTable({
                "oLanguage": {
                    "sZeroRecords": "No records to display",
                    "sSearch": "Search from all Records"
                },
                "bProcessing": true,
                "bServerSide": true,
                "bDestroy": true,
                "sAjaxSource": "frmTrip.aspx/GetMemberNotesByTrip",
                "sPaginationType": "full_numbers",
                "bDeferRender": true,
                "aoColumns":
                            [
                                null,
                                null,
                                null,
                                null,
                                null,
                                null,
                                null
                            ],
                "fnServerData": function (sSource, aoData, fnCallback) {
                    $.ajax({
                        "dataType": 'json',
                        "contentType": "application/json; charset=utf-8",
                        "type": "GET",
                        "url": sSource,
                        "data": aoData,
                        "success":
                                                    function (msg) {

                                                        var json = jQuery.parseJSON(msg.d);
                                                        fnCallback(json);
                                                        $("#table-tripNote").show();
                                                    }
                    });
                }
            });

服务器端代码---

[WebMethod()]
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
public static string GetMemberNotesByTrip(string sEcho, int iDisplayStart, int iDisplayLength)
{

    string rawSearch = HttpContext.Current.Request.Params["sSearch"].Trim();

    var whereClause = string.Empty;

    var filteredWhere = "1=1";

    var wrappedSearch = rawSearch.Trim();
    var Tempsb = new StringBuilder();

    Tempsb.Append("mbrid=" + MemberID);
    if (TripID != 0)
    {
        Tempsb.Append("and trpid=" + TripID);
    }
    else
        Tempsb.Append("and trpid=0");

    if (rawSearch.Length > 0)
    {
        Tempsb.Append("AND ( ISNULL(trpDate,'''') LIKE ");
        Tempsb.Append("'%" + wrappedSearch + "%'");
        Tempsb.Append(" OR clrFullName LIKE ");
        Tempsb.Append("'%" + wrappedSearch + "%'");
        Tempsb.Append(" OR clrPhone LIKE ");
        Tempsb.Append("'%" + wrappedSearch + "%'");
        Tempsb.Append(" OR clrRelationshipToMember LIKE ");
        Tempsb.Append("'%" + wrappedSearch + "%'");
        Tempsb.Append(" OR trpNote LIKE ");
        Tempsb.Append("'%" + wrappedSearch + "%'");
        Tempsb.Append(" OR clrOrganization LIKE ");
        Tempsb.Append("'%" + wrappedSearch + "%'");
        Tempsb.Append(" OR trpIsGrievance LIKE ");
        Tempsb.Append("'%" + wrappedSearch + "%'");
        Tempsb.Append(")");
    }

    if (Tempsb.Length > 0)
        filteredWhere = Tempsb.ToString();

    string orderByClause = string.Empty;
    orderByClause = "trpDate desc";

    StringBuilder sb = new StringBuilder();
    sb.Append(Convert.ToInt32(HttpContext.Current.Request.Params["iSortCol_0"]));

    sb.Append(" ");

    sb.Append(HttpContext.Current.Request.Params["sSortDir_0"]);

    orderByClause = sb.ToString();

    if (!String.IsNullOrEmpty(orderByClause))
    {
        orderByClause = orderByClause.Replace("0", ", trpDate ");
        orderByClause = orderByClause.Replace("1", ", clrFullName ");
        orderByClause = orderByClause.Replace("2", ", clrPhone ");
        orderByClause = orderByClause.Replace("3", ", clrRelationshipToMember ");
        orderByClause = orderByClause.Replace("4", ", clrOrganization ");
        orderByClause = orderByClause.Replace("5", ", trpIsGrievance ");
        orderByClause = orderByClause.Replace("6", ", trpNote ");

        orderByClause = orderByClause.Remove(0, 1);
    }
    else
    {
        orderByClause = "pronID ASC";
    }

    DataSet ds = clsTrip.GetTripNotesMaster(filteredWhere, orderByClause, iDisplayLength, iDisplayStart, true);


    List<clsTrip> lstTripNotesGrv = new List<clsTrip>();
    for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
    {
        clsTrip lsttripNotes = new clsTrip();
        lsttripNotes.clrFullName = ds.Tables[0].Rows[i]["clrFullName"].ToString();

        if (!string.IsNullOrEmpty(ds.Tables[0].Rows[i]["trpDate"].ToString()))
            lsttripNotes.trpDate = Convert.ToDateTime(ds.Tables[0].Rows[i]["trpDate"].ToString());
        else
            lsttripNotes.trpDate = DateTime.MinValue;

        lsttripNotes.clrPhone = ds.Tables[0].Rows[i]["clrPhone"].ToString();
        lsttripNotes.clrRelationshipToMember = ds.Tables[0].Rows[i]["clrRelationshipToMember"].ToString();
        lsttripNotes.clrOrganization = ds.Tables[0].Rows[i]["clrOrganization"].ToString();

        if (!string.IsNullOrEmpty(ds.Tables[0].Rows[i]["trpIsGrievance"].ToString()))
            lsttripNotes.trpIsGrievance = Convert.ToBoolean(ds.Tables[0].Rows[i]["trpIsGrievance"].ToString());
        else
            lsttripNotes.trpIsGrievance = false;
        lsttripNotes.trpNote = (ds.Tables[0].Rows[i]["trpNote"].ToString());

        lstTripNotesGrv.Add(lsttripNotes);
    }
    int TotalRec = Convert.ToInt32(ds.Tables[1].Rows[0][0]);

    var result = from c in lstTripNotesGrv
                 select new[] { 
                       //Convert.ToString(c.pronID),                               
                       c.trpDate !=null && c.trpDate!=DateTime.MinValue ? string.Format("{0:MMM d, yyyy}",c.trpDate):"-",
                       c.clrFullName.ToString(),
                       c.clrPhone.ToString(),
                       c.clrRelationshipToMember.ToString(),
                       c.clrOrganization.ToString(),
                       ( Convert.ToBoolean(c.trpIsGrievance)?"Yes":"No"),
                       c.trpNote
                   };

    JavaScriptSerializer jss = new JavaScriptSerializer();
    return jss.Serialize(new
    {
        sEcho,
        iTotalRecords = TotalRec,
        iTotalDisplayRecords = TotalRec,
        aaData = result
    });
}

加速数据表在客户端加载时间

4 个答案: