敲除加载数据非常缓慢

Question

我打电话给WCF服务来通过jquery ajax调用加载数据。 WCF服务非常快速地返回数据，但淘汰赛正在加载那些非常缓慢的数据。下面是使用jQuery AJAX

function loadData(id) { 
     var input = 
      { 
       Id: id 
      }; 


     $.ajax({ 
      url: "../Service/Table/TableData", 
      type: "PUT", 
      contentType: 'application/json', 
      processData: false, 
      data: JSON.stringify(input), 
      error: function (XMLHttpRequest, textStatus, errorThrown) { 

       alert(errorThrown); 
      }, 
      success: function (allData) { 
       var mappedData= $.map(allData, function (item) { 

        return new TableData(item); 
       }); 
       self.TableDataList(mappedData); 



      } 
     }); 

    } 

我对WCF服务调用下面是我的看法

<div style="overflow: hidden;margin-top: 30px;margin-left: 10px;float:left;" > 

      <table style="width: 100%" > 

       <colgroup> 
        <col /> 
        <col /> 

        <col/> 
       </colgroup> 

       <thead><tr> 

          <th style="padding: 0px">Id </th> 
          <th style="padding: 0px">Name</th> 

         </tr> 

       </thead> 

      </table> 
      <div style="overflow: auto;height: 490px;"> 
       <table id ="Table1" class="Hover" style="width: 100%;" > 
        <colgroup> 
         <col style="width: 20px"/> 
         <col style="width: 80px"/> 

         <col/> 
        </colgroup> 
        <tbody data-bind="foreach: TableDataList"> 

         <tr> 

          <td style="padding: 0px;text-align: left" data-bind="text: Id" ></td> 
          <td style="padding: 0px;" data-bind="text: Name "></td> 

         </tr> 


        </tbody> 
       </table> 
      </div> 

我加载约20000条记录，它需要2分钟载入页面。如何避免这种情况？

UPDATE1

将使用jQuery模板解决问题或将需要做分页？

UPDATE2

这里是我的资料表类代码

function TableData (data) { 
     this.Id = ko.observable(data.Id); 
     this.Name = ko.observable(data.Name); 
     this.LastName = ko.observable(data.LastName); 
     this.DateOfBirth = ko.observable(data.DateOfBirth); 
     this.Age= ko.observable(data.Age); 


    } 

Answer 1

寻呼是以此为@nemesv的最佳解决方案。在页面上呈现内容时，处理客户端20000条记录的性能方面会有自己的成本，因此它不是表现缓慢的挖空框架。所以你也可以使用按需加载“onScreenscroll”或类似的东西来让你的页面加速。

Answer 2

我们可以看到TableData类的代码吗？ 我想你会为这个类中的每个属性创建很多观察值。

由于视图不包含任何输入字段，我猜你不想修改数据。

这就是我的想法。 TableData类是减慢你的代码。 TableData类无用，因为您没有任何计算。 而且由于您不想修改数据，因此您不需要TableData属性的可观察值。

试着用这个替换成功函数。

success: function (allData) { 
    self.TableDataList(allData); 
} 

See fiddle