角2のグリッドでページ分割を行う方法

Question

私は、グリッドを使って角2のページ分割コンポーネントを持つグリッドを開発していますが、HTMLで以下のコードを試しました。

[gridOptions]="gridOptions" 
       [columnDefs]="columnDefs" 
       [showToolPanel]="showToolPanel" 
       [rowData]="rowData" 

       enableColResize 
       debug 
       rowHeight="30" 
       rowSelection="multiple" 
       rowModelType="pagination" 
       paginationPageSize = "15" 

この結果改ページボタンでグリッドが、rowDataがロードされていないが、列見出しがcoming.IはサービスからrowDataとcolumnDefsをロードしていますされている理由は、なぜ機能していないそのことですか？私は正しい方法でそれをやっていますか？すべてのヘルプは非常にあなたがページネーションのためのデータソースを指定する必要があり

Answer 1

高く評価され - 詳細については、[1] [改ページDocumenation]を見てみますが、一言で言えばを：

var dataSource = { 
     rowCount: 100, // for example 
     getRows: function (params) { 
       var rowsThisPage = someService.getData(params.startRow, params.endRow); 
       params.successCallback(rowsThisPage, lastRow); 
     }; 
} 

gridOptions.api.setDatasource(dataSource); 

更新

最初の[ページ番号の例] [2]を見てください。これはあなたが何をしているかを正確に行う方法を示しています。

私は以下のコードスニペットに適合するように少し修正しました。これは、ファイルをロードし、データソースを1つのブロックに設定する方法を示しています（別々のメソッドに分割するほうが便利です）。

// setup the grid after the page has finished loading 
var allOfTheData = []; 
document.addEventListener('DOMContentLoaded', function() { 
    var gridDiv = document.querySelector('#myGrid'); 
    new agGrid.Grid(gridDiv, gridOptions); 

    // do http request to get our sample data - not using any framework to keep the example self contained. 
    // you will probably use a framework like JQuery, Angular or something else to do your HTTP calls. 
    var httpRequest = new XMLHttpRequest(); 
    httpRequest.open('GET', '../olympicWinners.json'); // your static json file would go here 
    httpRequest.send(); 
    httpRequest.onreadystatechange = function() { 
     if (httpRequest.readyState == 4 && httpRequest.status == 200) { 
      allOfTheData = JSON.parse(httpRequest.responseText); 

      var dataSource = { 
       rowCount: 20, 
       getRows: function (params) { 
        // take a chunk of the array, matching the start and finish times 
        var rowsThisPage = allOfTheData.slice(params.startRow, params.endRow); 

        // see if we have come to the last page. if we have, set lastRow to 
        // the very last row of the last page. if you are getting data from 
        // a server, lastRow could be returned separately if the lastRow 
        // is not in the current page. 
        var lastRow = -1; 
        if (allOfTheData.length <= params.endRow) { 
         lastRow = allOfTheData.length; 
        } 
        params.successCallback(rowsThisPage, lastRow); 
       } 
      }; 

      gridOptions.api.setDatasource(dataSource); 
     } 
    }; 
});