バックエンドからデータをフェッチするときにページネーションコントロールがng-tableに表示されない
バックエンドからデータのリストを取得し、ng-tableを使用して表示しています。問題は、ページネーションコントロールが表示されないことです。以前、ダミーデータを使用してngテーブルを表示したとき、ページ付けは完全に正常に機能していました。誰かがここで私を助けてくれますか？
これは私のHTMLです：
<table ng-table="tableParams" show-filter="true" class="table">
<thead>
<tr>
<th ng-repeat="column in columns" ng-show="column.visible"
class="text-center" ng-class="{
'sort-asc': tableParams.isSortBy(column.field, 'asc'),
'sort-desc': tableParams.isSortBy(column.field, 'desc'),
'sortable': !$first
}"
ng-click="tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc') ? 'desc' : 'asc')">
<div>{{column.title}}</div>
</th>
</tr>
</thead>
<tr ng-repeat="user in data | filter:searchText">
<td width="30" style="text-align: left">
<input type="checkbox" ng-model="checkboxes.items[user.id]" />
</td>
<td data-title="'Email Id'" class="text-center" sortable="email" ng-show="columns[1].visible">
<span>{{user.email}}</span>
</td>
<td data-title="'User Karma'" class="text-center" sortable="userkarma" ng-show="columns[2].visible">
<span>{{user.userkarma}}</span>
</td>
<td data-title="'Date Joined'" class="text-center" sortable="datejoined" ng-show="columns[3].visible">
<span>{{user.datejoined}}</span>
</td>
<td data-title="'Unsubscribed'" class="text-center" sortable="status" ng-show="columns[4].visible">
<span>{{user.unsubscribed}}</span>
</td>
</tr>
</table>
以下は私のjsファイルです：
for (var i = 0; i < UserList.getUsers()
.length; i++) {
$scope.data.Push({
id: UserList.getUsers()[i]._id,
email: UserList.getUsers()[i].email,
userkarma: UserList.getUsers()[i].healthScore,
datejoined: moment(UserList.getUsers()[i].firstSessionAt)
.format("MMMM Do YYYY"),
unsubscribed: UserList.getUsers()[i].unsubscribed
})
};
$scope.columns = [{
title: '',
field: 'checkbox',
visible: true
},
{
title: 'Email',
field: 'email',
visible: true
}, {
title: 'User Karma',
field: 'userkarma',
visible: true
}, {
title: 'Date Joined',
field: 'datejoined',
visible: true
}, {
title: 'Unsubscribed',
field: 'unsubscribed',
visible: true
}
];
$scope.tableParams = new ngTableParams({
page: 1,
count: 10, // count per page
filter: {
name: 'M' // initial filter
},
sorting: {
name: 'asc'
}
}, {
total: $scope.data.length, // length of data
getData: function ($defer, params) {
// use build-in angular filter
var filteredData = params.filter() ?
$filter('filter')($scope.data, params
.filter()) :
data;
var orderedData = params.sorting() ?
$filter('orderBy')($scope.data,
params.orderBy()) :
$scope.data;
params.total(orderedData.length); // set total for recalc paginationemail
$defer.resolve(orderedData.slice((
params.page() -
1) * params.count(),
params.page() *
params.count()));
}
});
これは、非同期データのロード後にデータを更新するために使用される通常の$scope.tableParams.reload()関数が、テーブル内の合計アイテム数を更新しないために発生します。ダミーデータを使用していたときにこの値が最初に正しく設定されていたため、以前は発生しませんでした。
値を手動で更新するには、params.total(data.length);getData関数を追加する必要があります。
私にとっては、関数の最後のものの値を自動的に返すcoffeescriptを使用していたためです。これにより、ng-tableのgetData()がpromiseを取得し、それが取得されない場合は$ deferからそれ自体を作成するため問題が発生します。 Coffeescriptを使用し、 ngTableParams wikiページを使用してテーブルを構成する の例を適切に変換しなかったため、約束ではないものが返されました。
Coffeescriptで、getData()へのコールバックがいずれかで終わることを確認してください
$defer.promise
または
return
ng-tableが約束を得る、またはそれ自体を作ることを知っているように。
私はこの問題を抱えていて、ここで解決策を適用しましたが、それは私の問題を解決しませんでした。私の使用法は以下のようでした
<table ng-table="tableParams" class="table ng-table table-striped" show-filter="{{::showFilter}}">
<tr ng-show="showHeaders">
<th class="th-select" ng-repeat="column in columns">{{column.title}}</th>
</tr>
<tr ng-repeat="row in $data">
<td ng-repeat="column in columns" ng-show="column.visible" sortable="column.field" ng-click="save(row)">
{{row[column.field][column.subfield] || row[column.field]}}
<span compile="column.getValue()" ></span>
</td>
</tr>
</table>そして一日の努力の結果、問題はcssクラス「ng-table」の使用にあることを理解しました。追加する以外に時間を節約するためにこれについて言及しました
params.total（data.length）
あなたもあなたのcssをチェックするべきであり、動作するコードは：
<table ng-table="tableParams" class="table table-striped" show-filter="{{::showFilter}}">
<tr ng-show="showHeaders">
<th class="th-select" ng-repeat="column in columns">{{column.title}}</th>
</tr>
<tr ng-repeat="row in $data">
<td ng-repeat="column in columns" ng-show="column.visible" sortable="column.field" ng-click="save(row)">
{{row[column.field][column.subfield] || row[column.field]}}
<span compile="column.getValue()" ></span>
</td>
</tr>
</table>私は答えを見つけました。実際には、動的データをロードするときにng-tableに問題があります。データが動的にロードされる場合、getData関数は呼び出されません。だからこれは私がしたことです。 setTable関数を呼び出すrefreshTable関数を作成しました。この関数は、getData関数を呼び出して、テーブルをレンダリングします。
$scope.refreshTable = function () {
console.log('\n\n refreshing table')
$scope['tableParams'] = {
reload: function () {},
settings: function () {
return {}
}
};
$timeout(setTable, 100)
};
$scope.refreshTable();
function setTable(arguments) {
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10, // count per page
filter: {
name: '' // initial filter
},
sorting: {
name: 'asc'
}
}, {
filterSwitch: true,
total: $scope.users.length, // length of data
getData: function ($defer, params) {
console.log(
'\n\nngTable getData called now')
var orderedData = params.sorting() ?
$filter('orderBy')($scope.users,
params.orderBy()) :
data;
params.total(orderedData.length);
$defer.resolve(orderedData.slice((params.page() -
1) * params.count(), params.page() *
params.count()));
}
});
}
LoadData +非同期ロードでも同じ経験がありました。私の側の問題は、APIによって返されるデータが他の2つの配列の配列であるのに対し、テーブルに2つのうち1つだけを使用していたことでした。下記参照：
* .js
return $http(options).then(function (resp) {
params.total(resp.data.users.length)
return resp.data
}
* .html
<tr ng-repeat="row in usrCtrl.servicesTable.data.users" ng-if="row.Services.hasOwnProperty(usrCtrl.selectedService)">
Javascript側で「resp.data.users」を返し、html側で「usrCtrl.servicesTable.data」を正しくループすると、ページャーが表示されます。
ロイック