JQuery字符串的Jquery数据表渲染速度很慢

时间:2014-09-13 16:23:29

标签: jquery ajax json

请帮帮我,我的Sql数据库在一个表中只有15000行。但是jquery数据表的加载时间超过6秒。这对我来说很烦人。

我通过ajax调用传递了jsonstring。这是我的javascript代码,我正在使用web方法。

  function testJson() {
         $.ajax({
             type: "POST",
             url: '<%=ResolveUrl("~/WebService/Member/Client.asmx/TestJSON") %>',
             data: "{}",
             contentType: "application/json; charset=utf-8",
             dataType: "json",
             success: function (data) {

                 debugger;

                 var parsed = $.parseJSON(data.d);
                 $('#myDataTable').dataTable({
                     "bProcessing": true,
                     "bDeferRender": true,
                     "bJQueryUI": true,
                     "bPaginate": true,
                     "bDestroy": true,
                     "sPaginationType": "full_numbers",
                     "bFilter": true,
                     "bSort": false,
                     "sScrollY": 140,
                     "aaData": parsed,// <-- your array of objects
                     "aoColumns": [
                         { "mData": "_PIN" }, // <-- which values to use inside object
                         { "mData": "_AccountName" },
                         { "mData": "_FatherName" },
                         { "mData": "_MotherName" },
                         { "mData": "_BirthDateStr" },
                     { "mData": "_AccountName" },
                     { "mData": "_mphn" }
                     ]
                 });
             },
             error: function (msg) {

             }
         });
     };

这是我的Web方法代码:`

 [WebMethod]
      [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
      public string TestJSON()
      {
          DataTable dTable = BLClient.GetAllClientList();

          var lstAcc = new List<BOClient>();
          int i = 0;
          foreach (DataRow dr in dTable.Rows)
          {
              BOClient objClient = new BOClient();
              objClient._PIN = dr["PIN"].ToString();
              objClient._AccountName = dr["AccountName"].ToString();
              objClient._Branch_code = dr["Branch_code"].ToString();
              objClient._FatherName = dr["FatherName"].ToString();

              objClient._MotherName = dr["MotherName"].ToString();

              objClient._SpouseName = dr["SpouseName"].ToString();

              objClient._BirthDateStr = BLCommon.GetDateFormat_dd_mm_yyyy(dr["BirthDate"].ToString());

              objClient._mad1 = dr["mad1"].ToString();

              objClient._mphn = dr["mphn"].ToString();

              i++;

              lstAcc.Add(objClient);
          }
          System.Web.Script.Serialization.JavaScriptSerializer jSearializer = new System.Web.Script.Serialization.JavaScriptSerializer();
          jSearializer.MaxJsonLength = Int32.MaxValue;
          return jSearializer.Serialize(lstAcc);

      }

花费超过6秒为什么以及如何从中获得补救。

2 个答案:

答案 0 :(得分:0)

如果我上次回忆,你需要收集偏移量,这样你就不会在每个ajax请求上返回15000行。您应该只在SQL中返回10-100行,这将提高您的性能。

Datatables将这些变量发送到您的ajax脚本:

 string RowStart = Request.Querystring["iDisplayStart"];  //ie: 10
 string ReturnLength = Request.Querystring["iDisplayLength"];  //ie: 25

然后使用数据表用于ajax请求的值来偏移SQL数据。

例如,如果RowStart:10ReturnLength:25,那么您应该只从第10行开始返回25行。

我有一个数据表以这种方式非常快速地处理数十万行。

答案 1 :(得分:-1)

在前端渲染这样的大表不是一个好方法,因为它需要大量内存来渲染表,并可能导致浏览器崩溃。您应该一次只返回少量行,并进行渲染。当用户在表的末尾向下滚动时,使用ajax获取更多行并进行渲染。

6秒延迟可能是很多事情:sql处理数据+ ajax + html渲染的时间。查看浏览器的开发人员工具栏,了解瓶颈在哪里。

相关问题