동적 AngularJS 테이블을 페이지 매김하는 방법은 무엇입니까?

Question

ng-table-dynamic 및 $ http로 페이지 매김을 얻으려면 어떻게해야합니까? 테이블 생성 코드는

<table class="table-bonds table table-bordered table-hover table-striped" 
    export-csv="csv" 
    separator="," 
    show-filter="true" 
    ng-table-dynamic="bondsTable.bondsDataParams with bondsTable.bondsDataCols"> 
<tr ng-repeat="row in $data"> 
    <td class="hand" 
     ng-repeat="col in $columns">{{::row.node[col.field]}}</td> 
</tr> 

있는 테이블의

HTML 사양은 다음과 같습니다

self.bondsDataParams = new NgTableParams({ 
    page: 1, // show first page 
    count: 5 // count per page 
    }, { 
    filterDelay: 0, 
    total: 0, 
    getData: function (params) { 
     return $http(bondsDataRemote).then(function successCallback(response) { 
     // http://codepen.io/christianacca/pen/mJoGPE for total setting example. 
     params.total(response.data.nodes.length); 
     return response.data.nodes; 
     }, function errorCallback(response) { 

     }); 
    } 
    }); 

AngularJS와는 1.5.8

Answer 1

주요 문제는 아약스를 통해 데이터를로드하는 것과 요청의 서버 쪽에서 필터링/페이지 매김을 지원하지 않는 것입니다.

테이블을 필터링 할 수 있도록 모든 데이터를 제공하거나 서버 측에서 페이지 매김, 정렬 및 필터링을 완전히 지원하십시오.

옵션 1. 데이터를로드하십시오. 내 데이터 집합이 그다지 크지 않아 사람들이 정렬 및 다운로드 필터링의 모든 순열을 사용할 수있는 가장 쉬운 방법 인 것처럼 보였으므로이 옵션을 사용했습니다.

여기에 총 값이 필요하지 않습니다. 데이터가 모두로드됩니다.

var Api = $resource('/green-bonds.json'); 

// Or just load all the data at once to enable in-page filtering, sorting & downloading. 
Api.get({page: "1", count: "10000"}).$promise.then(function (data) { 
    self.bondsDataParams = new NgTableParams({count: 25}, { 
     dataset: data.results 
    }) 
}); 

또는 전체 지연로드 데이터 API 및 전체 설정을 지원합니다. 데이터 세트를 설정하는 것이 아니라 getData를 사용합니다.

var Api = $resource('/green-bonds.json'); 

this.bondsDataParams = new NgTableParams({}, { 
    getData: function (params) { 
     return Api.get(params.url()).$promise.then(function (data) { 
     params.total(data.count); 
     return data.results; 
    }); 
    } 
}); 

주 1 : 기본 $ 자원으로는 배열 객체 .query()에 대한 객체 갔지()을 예상하고있다. isArray :를 참조하십시오. 나는이 일을하지 않았다.

주 2 : params.url()은 $ resource에 ng-table 매개 변수를 제공합니다. 예 : {page : "1", 개수 : "10"}

Answer 2

This이 페이지 매김했다위한 훌륭한 지침이다 그것 좀 봐. 다양한 옵션과 사용하기 쉽습니다.