Pagination issue with filtering

[nbartley]

Thanks again for the excellent work.

Currently with a non-paged/non-reloaded data source, when using the ng-filter with repeat option the pagination doesn't reset to 1 when filtering.

I made a simple fix by adding an ng-change, but it seems that when the ng-repeat is filtered it should do this automatically.

[daniel-nagy]

I'm trying to understand your issue,

non-paged/non-reloaded data source

Do you mean filtering is happening on the client and not the server?

the pagination doesn't reset to 1 when filtering

The page number doesn't get reset to 1?

[pistachio2011]

I have seen the same issue, the query.page is set to 0 instead of 1, if the last filter return no rows. If the next filter returns more than 1 rows, the pagination display as -9-10.

[nbartley]

Sorry for taking so long to get back to you:

Here's how to test the problem: Use a static dataset long enough to page. Your codepen data trippled is enough. Navigate to page 2. Use ng-repeat filtering (a standard filter search field) to reduce the number of rows to less than a page.

Problem: The using ng-repeat with a filter (search) does not reset the pagination to 1 (or the result filtered data set), it always maintains the full data set pagination. If the user is not on page 1, they will not see the filtered rows as they are still on an empty page 2+.

[m-kharbat]

you can do this yourself with an ng-change on your input for filtering.. and in the ng-change set the page to 1

[ralph-wermke]

Any news on this. Is there a workaround for this that works?

[setupdostbukidnon]

up

[dcolley]

I'm using this:

      <md-table-pagination 
        md-limit="table.query.limit" 
        md-limit-options="table.limitOptions" 
        md-page="table.query.page"
        md-total="{{ (items|filter: table.filter.search).length }}"  <<-- check this line --
        md-on-paginate="table.onPaginate" 
        md-page-select
        ></md-table-pagination>

	$scope.pageSteps = [5, 10, 15];
	$scope.table = {
		options: {
			rowSelection: true,
			multiSelect: true,
			autoSelect: true,
			decapitate: false,
			largeEditDialog: false,
			boundaryLinks: false,
			limitSelect: true,
			pageSelect: true,
		},
		selected: [],
		limitOptions: [$scope.pageSteps[0], $scope.pageSteps[1], $scope.pageSteps[2], {
			label: 'All',
			value: function () {
				return $scope.$storage.items ? $scope.$storage.items.count : 0;
			}
		}],
		filter: {search: {}},
		query: {
			order: 'field1',
			limit: $scope.pageSteps[0],
			page: 1
		},
		columns: [
			{ name: 'id',       orderBy: 'id' }, 
			{ name: 'field1',    orderBy: 'field1' }, 
			{ name: 'field2',   orderBy: 'field2', numeric: true },
		],
		onReorder: function(order) {
			console.log('Scope Order: ' + $scope.table2.query.order);
			console.log('Order: ' + order);
			// $scope.promise = $timeout(function () {
			// }, 2000);
		},
		onPaginate: function(page) {
			console.log('Paginate page: ' + $scope.table.query.page);
			console.log('Page: ' + page);
			// $scope.promise = $timeout(function () {
			// }, 2000);
		},
		toggleLimitOptions: function () {
			console.log("toggleLimitOptions: ...");
			$scope.table.limitOptions = $scope.table.limitOptions ? undefined : $scope.pageSteps;
		}
	};

I'm still working on the limitOptions - but I think you can use the rest