KO Grid에 대한 페이지 매김이 작동하지 않습니다.

Question

KO-Grid로 작업 중이며 모든 데이터를 올바르게로드하는 것으로 보입니다. 이제, 페이지 매김 부분을 작업하고 있는데 제대로 작동하지 않는 것 같습니다. 예, 하단의 페이지 매김 컨트롤을 사용하지만 페이지 크기를 결정할 수있게되면 작동하지 않습니다. 페이지 크기는 다음과 같은 두 가지 옵션으로 구성됩니다. https://github.com/ericmbarnard/KoGrid/wiki/Configuration

1.pageSizes : [5,10,25] - 옵션을 표시하는 것으로 보이지만 선택을 5에서 10으로 변경하면 nto가됩니다. 선택에 따라 작동하는 것 같습니다. 2.pagesize : // somenumber - 코드를 중단합니다.

나는 jsfiddle에의 모델을 작업 한 : http://jsfiddle.net/sf4p3/46/

어떤 제안?

Answer 1

글쎄, KoGrid의 페이지 매김은 당신이 바라는 마법을 작동시키지 않는 것처럼 보입니다. 여기

는 GitHub의에 KoGrid 위키에서 예제에 대한 링크입니다 :

http://ericmbarnard.github.com/KoGrid/examples/Complex-Server-Side-Paging.html

HTML 페이지의 소스보기에서 하나의 가능성 (스크롤하지 않고도 뷰 모델 선언의 시작을 볼 수 있습니다 물론 화면 해상도에 따라 다름). 그럼에도 불구하고, 이것이 하나 sort, filter라는 기능을 참조한다 (30)

공지 뷰 모델에서 관찰라는 pageSize 있다는 것을 선 주위 시작하고,이를 50

비트를 스크롤로 설정되고 데이터를 필터링하고, 데이터를 정렬하고, 현재 페이지에 대한 데이터 세트를 생성하는 데는 getPagedDataAsync이 필요합니다. 여기

가 getPagedDataAsync 기능에 대한 코드입니다 : 뷰 모델의 나머지 부분의 세부 사항을 보지 않고

this.getPagedDataAsync = function (pageSize, page, filterInfo, sortInfo) { 
    setTimeout(function() { 
     var data = window.getExampleData(); 
     var filteredData = filter(data(), filterInfo); 
     var sortedData = sort(filteredData, sortInfo); 
     var pagedData = sortedData.slice((page - 1) * pageSize, page * pageSize); 
     self.myObsArray(pagedData); 
    }, 0); 
}; 

한이 기능은 모든 데이터를 검색하여 시작되는 위의 코드를 읽고 말할 수 있어야 이 예제 페이지에 표시 할 데이터를 필터링 한 다음 데이터를 필터링하고 데이터를 정렬합니다.

그런 다음 데이터 배열을 슬라이스하여 현재 페이지에서 볼 데이터를 추출하고 그 슬라이스는 눈금에 데이터를 표시하는 데 사용되는 관찰 가능 배열 myObsArray에 전달됩니다.

다음은이 예에서 그리드의 선언입니다 :

<div id="sandBox" class="example" style="height: 600px; max-width: 700px;" 
    data-bind="koGrid: { 
     data: myObsArray, 
     columnDefs: [ 
      { field: 'Sku', width: 140 }, 
      { field: 'Vendor', width: 100 }, 
      { field: 'SeasonCode', displayName: 'Season Code', width: 150 }, 
      { field: 'Mfg_Id', displayName: 'Mfg ID', width: 180 }, 
      { field: 'UPC', width: 170 } 
     ], 
     autogenerateColumns: false, 
     isMultiSelect: false, 
     enablePaging: true, 
     useExternalFiltering: true, 
     useExternalSorting: true, 
     filterInfo: filterInfo, 
     sortInfo: sortInfo, 
     pageSize: pageSize, 
     pageSizes: [25, 50, 75], 
     currentPage: currentPage, 
     totalServerItems: totalServerItems, 
     selectedItem: selectedItem }"> 
</div> 

는 희망이 도움이, 당신은 당신의 페이징 문제를 해결 할 수 있습니다.

질문이 있으시면 연락해주십시오.

UPDATE

@Californicated 나는 휴가,하지만 난 당신의 최신 바이올린에 들여다 봐도 약간의 다운 타임을 가졌다.

난 당신이 최신 바이올린에 있던 무슨 포크와 페이징 작업을 얻기 위해 다음과 같이 변경했다 : 관찰 가능한 선언에서

, 나는 2 pageSize의 값을 변경하고 totalServerItems의 값 7. JS에서 getPagedDataAsync 함수의 data var 선언을 변경하여 Prizefillfilmentstatuses 관찰 가능 어레이를 검색하고 있습니다. JS 코드의 마지막 줄에서

, 내가 jsFiddle 툴바 2. 로 (50)로부터 최초의 파라미터를 변경 I을 "의 onLoad" "아니오 랩 (체)"

로부터 제 드롭 변경 HTML에서 koGrid의 선언, 나는 다음과 같은 옵션/매개 변수 추가 :

pageSize: pageSize, 
currentPage: currentPage, 
totalServerItems: totalServerItems, 
selectedItem: selectedItem 

페이지 설정 혼자 JS 변경 작업을했다,하지만 페이징 도구 (이전, 다음 등)이었다 koGrid 선언에 totalServerItems 옵션을 추가 할 때까지 활성화되지 않습니다.

다시 질문이 있으면 알려주세요.