DataTables + KnockoutJS : "테이블에 데이터가 없습니다"및 정렬 문제

Question

다음 질문에서 언급했듯이 : How do I pass an ID from View to the ViewModel as a parameter for GET function? MVC4, knockoutJS, 웹 API, 부트 스트랩, MSSQL Server 2012를 사용하여 MVC 응용 프로그램을 개발하고 있습니다. 등등. 나는 테이블을 만들고이를 knockoutJS를 사용하여 DB의 데이터로 바인딩하기 위해 DataTables jQuery 라이브러리를 사용하고있다. 다음과 같은 두 가지 문제가 발생합니다. data-bind = "foreach : regionsListModel.regions"로 테이블을 바인딩하면 내 테이블이 채워지지만 끝에 "No data in the table"행이 추가됩니다. "0에서 0의 결과 표시 0"이라는 페이지 바닥 글, 페이지 매김 없음, 결과를 필터링하려고 할 때 테이블을 완전히 비 웁니다. 헤더가있는 열을 정렬 할 때도 마찬가지입니다.

코드 스 니펫을 다시 게시합니다.

의 ViewModel : 뷰에 대한

var regionsModel = { 
    regionId: ko.observable(), 
    companyId: ko.observable(), 
    name: ko.observable(), 
    companyName: ko.observable()  
}; 

var regionsListModel = { 
    regions: ko.observable() 
}; 

function getRegions() { 
    get(apiUrl + "Regions/GetRegions", {}, function (data) { 
     regionsListModel.regions(data); 
    }); 
} 

function getRegion() { 
    get(apiUrl + "Regions/GetRegion", { aiId: regionsModel.regionId() }, function (data) { 
     regionsModel.regionId(data.RegionID); 
     regionsModel.companyName(data.CompanyName); 
     regionsModel.companyId(data.CompanyID); 
     regionsModel.name(data.Name); 
    }); 
} 

function viewRegion() { 
    $("#ViewRegionModal").modal('show'); 
    //regionsModel.regionId($('#ViewRegion').val()); 
    getRegion(); 
    return false; 
} 

코드 :

<table class="table table-striped table-bordered responsive" id="dtable"> 
          <thead> 
           <tr> 
            <th style="width: 20px;">ID</th> 
            <th>Region Name</th> 
            <th>Company Name</th> 
           </tr> 
          </thead> 
          <tbody data-bind="foreach: regionsListModel.regions"> 
           <tr id="ViewRegion" data-toggle="modal" data-bind="click: viewRegion, value: RegionID"> 
            <td data-bind="text: RegionID"></td> 
            <td data-bind="text: Name"></td> 
            <td data-bind="text: CompanyName"></td> 
           </tr> 
          </tbody> 
         </table> 

문제의 사진 : 어떤 도움을 주시면 감사하겠습니다 http://i.imgur.com/CNRnRlW.png

!

편집 : getRegions (Regions.js 파일에 있고 ViewModel은 RegionsData.js에 있으며 페이지가로드 될 때로드 됨)를 호출하는 코드를 추가하십시오. 사람이 내가했던 것처럼 같은 문제에 오면

$(function() { 
    ko.applyBindings(regionsModel); 

    getRegions(); 
    getCompanies(); 

    $("#NewRegionButton").click(function() { 
     $("#NewRegionModal").modal('show'); 
     return false; 
    }); 

    $("#ViewRegion").click(function() { 
     $("#ViewRegionModal").modal('show'); 
     return false; 
    }); 

    $("#NewRegionModalClose").click(function() { 
     clearFields(); 
     $("#NewRegionModal").modal('hide'); 
     return false; 
    }); 

    $("#NewRegionSave").click(function() { 
     newRegion(); 
     $("#NewRegionModal").modal('hide'); 
     return false; 
    }); 

    $("#ViewRegionClose").click(function() { 
     $("#ViewRegionModal").modal('hide'); 
     return false; 
    }); 

    $("#ViewRegionEdit").click(function() { 
     $("#ViewRegionModal").modal('hide'); 
     $("#EditRegionModal").modal('show'); 
     return false; 
    }); 

    $("#RegionUpdateSave").click(function() { 
     updateRegion(); 
     $("#EditRegionModal").modal('hide'); 
     return false; 
    }); 

    $("#ViewRegionEditClose").click(function() { 
     clearFields(); 
     $("#EditRegionModal").modal('hide'); 
     return false; 
    }); 
}) 

Answer 1

, 여기에 솔루션, 그리고 완전히 녹아웃 - 무료 :

function updateView() { 
    $("#tableProblems").dataTable({ 
     "bDestroy": true, 
     "sDom": "<'row-fluid dt-header'<'span6'f><'span6'>r>t<'row-fluid dt-footer'<'span6'i><'span6'p>>", 
     "aaData": problemsModel.problems(), 
     "aoColumns": [ 
      { "mDataProp": "ProblemID" }, 
      { "mDataProp": "CategoryName" }, 
      { "mDataProp": "DateOpenFormatted" }, 
      { "mDataProp": "DateClosedFormatted" }, 
      { "mDataProp": "ObjectName" }, 
      { "mDataProp": "Nickname" } 
     ] 
    }); 
} 

난 그냥 페이지의 초기화에 코드의이 부분을 사용하고, get * 함수를 수행 할 때 view 측에서 updateView() 함수를 호출하고 tbody를 완전히 비워두고 DataTables가 나머지를 수행합니다.

(이것은 내가 개발중인 다른 구성 요소의 예이며 지역은 동일하지 않지만 원리는 동일합니다.)