如何应用 pagination.js 和 ui-网格
how to apply pagination.js with ui-grid
目前,我可以成功显示分页控制器,但我有一种情况,当我点击下一页时,我的 uigrid table 不会立即更改内容,只有当我将鼠标悬停在 table 上。
(pagination.js的信息在http://pagination.js.org上)
HTML:
<div id="pagination-container" ></div>
JS(控制器)
function init() {
initGrid();
.........
initPagination($scope.gridOptions.data,5,2);
.........
}
var initPagination = function(data, pageSizeOfGrid, pageRangeOfGrid) {
var container = $('#pagination-container');
container.pagination({
dataSource: data,
pageSize: pageSizeOfGrid,
pageRange: pageRangeOfGrid,
showGoInput: true,
showGoButton: true,
/** overwrite methods/events of buttons **/
afterPreviousOnClick: function() {
console.log('previous page!');
$scope.gridApi.pagination.previousPage();
},
afterNextOnClick: function() {
console.log('next page!');
$scope.gridApi.pagination.nextPage();
},
afterPageOnClick: function() {
console.log('selected page: ',
container.pagination('getSelectedPageNum') );
//$scope.gridApi.pagination.seek();
}
})
};
我找到了解决方法,只需要添加一个代码来刷新ui网格table
afterPreviousOnClick: function() {
console.log('previous page!');
$scope.gridApi.pagination.previousPage();
$scope.gridApi.core.refresh(); // ro refresh the table
},
目前,我可以成功显示分页控制器,但我有一种情况,当我点击下一页时,我的 uigrid table 不会立即更改内容,只有当我将鼠标悬停在 table 上。 (pagination.js的信息在http://pagination.js.org上) HTML:
<div id="pagination-container" ></div>
JS(控制器)
function init() {
initGrid();
.........
initPagination($scope.gridOptions.data,5,2);
.........
}
var initPagination = function(data, pageSizeOfGrid, pageRangeOfGrid) {
var container = $('#pagination-container');
container.pagination({
dataSource: data,
pageSize: pageSizeOfGrid,
pageRange: pageRangeOfGrid,
showGoInput: true,
showGoButton: true,
/** overwrite methods/events of buttons **/
afterPreviousOnClick: function() {
console.log('previous page!');
$scope.gridApi.pagination.previousPage();
},
afterNextOnClick: function() {
console.log('next page!');
$scope.gridApi.pagination.nextPage();
},
afterPageOnClick: function() {
console.log('selected page: ',
container.pagination('getSelectedPageNum') );
//$scope.gridApi.pagination.seek();
}
})
};
我找到了解决方法,只需要添加一个代码来刷新ui网格table
afterPreviousOnClick: function() {
console.log('previous page!');
$scope.gridApi.pagination.previousPage();
$scope.gridApi.core.refresh(); // ro refresh the table
},