JScript 문자열에 대한 Jquery 데이터 테이블 렌더링이 느림

도와주세요, 제 SQL 데이터베이스에는 테이블에 15000 개의 행만 있습니다. jquery 데이터 테이블의 로딩 시간은 6 초 이상입니다. 그것은 나에게 짜증나.JScript 문자열에 대한 Jquery 데이터 테이블 렌더링이 느림

아약스 호출로 jsonstring을 전달했습니다. 여기에 내 자바 스크립트 코드 및 웹 메서드를 사용하고 있습니다.

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) { 

      } 
     }); 
    };

가 여기 내 웹 메서드 코드 :`

[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 초 걸린다 왜 그리고 어떻게 내가 그것에서 구제를 얻을 수 있습니다.

출처

2014-09-13 Shahidul Hira

15000 행은 많은 행입니다. – Pointy

ajax를 사용하여 서버 측 페이지 매김을 구현하는 방법에 대한 문서를 읽으십시오. – charlietfl

적어도 데이터를로드하고 JS를 사용하여 구문 분석 된 JSON에서 페이지 매김을 수행 할 수 없다면. 페이지에 15000 개의 행을로드하지 마십시오. 그것은 단지 나쁜 UX입니다. – Andy

-1

프런트 엔드에서 테이블을 렌더링하는 데 많은 양의 메모리가 필요하고 브라우저가 충돌 할 수 있으므로 큰 테이블을 렌더링하는 것은 좋지 않습니다. 한 번에 적은 수의 행만 반환하고 렌더링해야합니다. 사용자가 테이블 끝에서 아래로 스크롤하면 ajax를 사용하여 더 많은 행을 가져 와서 렌더링합니다.

지연 시간은 많은 것들이 될 수 있습니다. 시간 SQL은 데이터 + 아약스 + HTML 렌더링을 처리합니다. 병목 현상이 어디 있는지 브라우저 개발자 도구 모음을 살펴보십시오.

출처

2014-09-13 16:35:22 Lance

마지막으로 회상 한 경우 각 Ajax 요청에서 15000 개의 행을 반환하지 않도록 오프셋을 수집해야합니다. SQL에서 10-100 행만 반환하면 성능이 향상됩니다.

는 Datatables은 아약스 스크립트에 이러한 변수를 보냅니다

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

그런 다음 datatables가 아약스 요청을 사용하여 그 가치와 SQL 데이터를 오프셋.

예를 들어, RowStart:10 및 ReturnLength:25 경우에, 당신은 내가 매우 빠르게 행 수천 수백 데이터 테이블 작업이 방법이

행 10부터 25 개 행을 반환해야합니다.

출처

2014-09-13 17:02:07

JScript 문자열에 대한 Jquery 데이터 테이블 렌더링이 느림

답변

관련 문제