녹아웃 데이터 테이블 추가 값 (다시로드하지 않음)

Question

knockout.js DataTabls를 다시 작성하는 데 문제가 있습니다. 그래서 나는 페이지로드 (예 : 첨부 : 함수 메소드)에서 올바르게로드되는 데이터 테이블을 가지고 있는데, 조건에 따라 테이블을 표시하는 (Display All, Allowed, Not Allowed) 버튼이 여러 개 있습니다. 이제이 버튼을 클릭하면 표가 다시로드됩니다. 즉, 버튼을 클릭 한 후 5 개의 레코드가 있으면 10 (5 + 5)가 표시됩니다. (즉,이 10에서 유지하고 15, 20에 도달하지 않은 ...) 일단 이것은 오직 여기

은 기존 방법 내보기 모델 입니다 발생합니다

$.ajax({ 
    type: "GET", 
    url: "/api/listusers/GetContractorList", 
    dataType: "json", 
    contentType: "application/json; charset=utf-8", 
    headers: appsecurity.getSecurityHeaders(), 

    success: function (result) { 
     if (result != null) { 
      var mappedContractorList = $.map(result, function (item) { 
       return new GKContractorObj(item); 
      }); 

      viewmodel.ContractorList(mappedContractorList); 

      tableObj= $('#tblContractorsList').DataTable() 

     } 
    }, 
    failure: function (error) { 
     logger.logError('Failed to contractor list', 'Error', null, true); 
    } 
}); 

DisplayAll 버튼을

을 클릭

Ajax 호출

$.ajax({ 
    type: "GET", 
    url: "/api/listusers/GetContractorList", 
    dataType: "json", 
    contentType: "application/json; charset=utf-8", 
    headers: appsecurity.getSecurityHeaders(), 

    success: function (result) { 
     if (result != null) { 
      var mappedContractorList = $.map(result, function (item) { 
       return new GKContractorObj(item); 
      }); 

      viewmodel.ContractorList(mappedContractorList); 

      tableObj = $('#tblContractorsList').DataTable(); 


     } 
    }, 
    failure: function (error) { 
     logger.logError('Failed to contractor list', 'Error', null, true); 
    } 
}); 

뷰 :

<div class="divListGKContractor"> 
    <div class="tab-pane fade in active" id="listContractor"> 
    <div class="row"> 
     <div class=""> 
      <table id="tblContractorsList" class="display table table-condensed table-bordered table-responsive" cellspacing="0"> 
      <thead><tr><td>Contractor Details</td><td>Details</td></tr></thead> 
      <tbody data-bind="foreach: ContractorList"> 
       <tr> 
       <td data-bind="text: Contractor_Name"></td> 
       <td>    
        <a title="List_Contractor" class="btn-borderless widget-button" data-bind="click: $root.listContractorDetails"> 
        <i class="fa fa-edit text-success"></i></a> 
       </td> 
       </tr> 
      </tbody> 
      </table> 
     </div> 
    </div> 
    </div> 
</div> 

내가 어떤이 있다고 생각하지 말아 컨트롤러 호출로 고소하십시오. 그게 내가 테이블 새로 고침/다시로드하는 방법을 잘 모르겠다.

도움이나 제안이 있으십니까?

Answer 1

이 코드는로드시 테이블을 지우고 문제를 해결합니다.

//Clear table on load 
viewmodel.ContractorList([]); 
tableObj.destroy(); 
$('#tblContractorsList tbody tr').remove();