AngularJS:分页不适用于 ng-table
AngularJS: Pagination not working for ng-table
所以,我正在编写一个网络应用程序,它获取大量学生作业并将它们放入一个大 table 中。我为此使用 ng-table 。该列表很大,所以我尝试在 table 上使用分页,否则页面将永远加载。但是现在分页不起作用,控件和页码显示在 table 的底部,但所有结果都在第一页上。我在这里想念什么?
相关代码(用coffeescript写的):
$scope.loadWorkbooks = ->
$scope.workbooks = []
$scope.filters = {}
#...some filtering stuff...
$http.get "/api/students?active=true"
.then (response) ->
total = 0
_.each response.data, (value) ->
total += value.Workbooks.length
$scope.workbooksTable = new NgTableParams
sorting:
id: 'desc'
page: 1
count: 20
,
total: total
# counts:[]
getData: ($defer, params) ->
filteredData = if params.filter() then $filter('filter')($scope.workbooks, params.filter()) else $scope.workbooks
orderedData = if params.sorting() then $filter('orderBy')(filteredData, params.orderBy()) else filteredData
$defer.resolve orderedData
$scope.loadAllWorkbooks()
$scope.loadAllWorkbooks = () ->
$http.get "/api/v1/students/workbook"
.then (response) ->
workbooks = response.data
if workbooks.length > 0
$scope.workbooks = $scope.workbooks.concat workbooks
Materialize.toast "Loading workbooks", 2000
$scope.workbooksTable.reload()
table:
<table show-filter="true" class="striped highlight bordered" ng-table="workbooksTable">
<tr ng-repeat="workbook in $data" ng-show="workbook.state !== 'dead'">
<td data-title="'ID'" sortable="'id'" filter="{id: 'text'}">
{{ workbook.id }}
</td>
<td data-title="'Student'" sortable="'Student.name'">
<p>{{ workbook.Student.firstName }} {{ workbook.Student.lastName }}</p>
</td>
<!--... more columns...-->
</tr>
</table>
明白了,我需要在我的 get getData
函数中添加一行:
getData: ($defer, params) ->
filteredData = if params.filter() then $filter('filter')($scope.workbooks, params.filter()) else $scope.workbooks
orderedData = if params.sorting() then $filter('orderBy')(filteredData, params.orderBy()) else filteredData
#line I needed to add below
slicedData = orderedData.slice (params.page() - 1) * params.count(), params.page() * params.count()
#and then resolve slicedData instead of orderedData
$defer.resolve slicedData
所以,我正在编写一个网络应用程序,它获取大量学生作业并将它们放入一个大 table 中。我为此使用 ng-table 。该列表很大,所以我尝试在 table 上使用分页,否则页面将永远加载。但是现在分页不起作用,控件和页码显示在 table 的底部,但所有结果都在第一页上。我在这里想念什么? 相关代码(用coffeescript写的):
$scope.loadWorkbooks = ->
$scope.workbooks = []
$scope.filters = {}
#...some filtering stuff...
$http.get "/api/students?active=true"
.then (response) ->
total = 0
_.each response.data, (value) ->
total += value.Workbooks.length
$scope.workbooksTable = new NgTableParams
sorting:
id: 'desc'
page: 1
count: 20
,
total: total
# counts:[]
getData: ($defer, params) ->
filteredData = if params.filter() then $filter('filter')($scope.workbooks, params.filter()) else $scope.workbooks
orderedData = if params.sorting() then $filter('orderBy')(filteredData, params.orderBy()) else filteredData
$defer.resolve orderedData
$scope.loadAllWorkbooks()
$scope.loadAllWorkbooks = () ->
$http.get "/api/v1/students/workbook"
.then (response) ->
workbooks = response.data
if workbooks.length > 0
$scope.workbooks = $scope.workbooks.concat workbooks
Materialize.toast "Loading workbooks", 2000
$scope.workbooksTable.reload()
table:
<table show-filter="true" class="striped highlight bordered" ng-table="workbooksTable">
<tr ng-repeat="workbook in $data" ng-show="workbook.state !== 'dead'">
<td data-title="'ID'" sortable="'id'" filter="{id: 'text'}">
{{ workbook.id }}
</td>
<td data-title="'Student'" sortable="'Student.name'">
<p>{{ workbook.Student.firstName }} {{ workbook.Student.lastName }}</p>
</td>
<!--... more columns...-->
</tr>
</table>
明白了,我需要在我的 get getData
函数中添加一行:
getData: ($defer, params) ->
filteredData = if params.filter() then $filter('filter')($scope.workbooks, params.filter()) else $scope.workbooks
orderedData = if params.sorting() then $filter('orderBy')(filteredData, params.orderBy()) else filteredData
#line I needed to add below
slicedData = orderedData.slice (params.page() - 1) * params.count(), params.page() * params.count()
#and then resolve slicedData instead of orderedData
$defer.resolve slicedData