is there a way to set different number of items to display in views that has ajax pager? For example on first load, you have 10 items, after you click loadmore to load another list, you can get 15 items instead.
Thank you for your wisdom!
views show more has this functionality.
Related
In my React app, I have a page that when renders, it makes a fetch request using React Query useInfiniteQuery to get two items from the server and populate a list.
I implemented a "View more" button that when you click on it, it will call React Query useInfiniteQuery, fetch more data and add it to the list. I can do this X times and potentially get hundreds of items in the list.
When there is no more data to fetch I change that button to a "View less" button and when I click on it I want to do some kind of "collapse" and show the fist two items on the list.
How can I achieve this? Is there something that comes with React Query that let's me do this?
Should I just remove the items from the DOM manually?
react-query doesn't do anything dom related, it's up to you how many pages you want to render. if you have 10 pages in the cache and only want to render 2 of them - then only render 2 of them. you can also remove the other pages from the cache with queryClient.setQueryData, but I wouldn't do that.
I want to show only 5 items per page and disable pageSizeOptions but display the navigations so that use can browse through all pages by that navigation keys only.
Example
Use only:
<mat-paginator [pageSize]="5" showFirstLastButtons>
You can use any number instead of 5 as per your need. But in this case user wont be able to change items per page and height of the table will be fixed.
I have created a page where there are 2 section (2 controllers and 2 views).
The section in the left has categories (category_selector), and the section on the right displays items in the category that was selected in the left section (category_item_display).
There are many items in a single category, so pagination is implemented in category_item_display.
Pagination works by loading 20 items and then shows a button 'Show More' if there are more items in the category. Clicking the button will add another 20 items to the page.
When an item is clicked, the page is changed to item details page and the item details are displayed.
Now here is the problem.If I click on 'Show More' button once or more, then more than 20 items are displayed in category_item_display. But once I navigate to item details page and then click back button, again the controller loads and shows only 20 items in category_item_display.
So what I did was that the number of items to be loaded is checked from a URL parameter 'loaded_items' first, and if not found then default 20 is picked.
A URL search parameter 'loaded_items=' is added to the address when an item is clicked, and then the address is changed. I did this by having both ng-ref and ng-click on the anchor element, so that ng-click will execute first which has $location.search('loaded_items', count);
I did not want to store the loaded items count in the URL as soon as 'Show More' is clicked, because if I select another category the loaded items will be as per this count.
I want to remove the URL parameter 'loaded_items' on controller init after recording the value somewhere so that the list can be retrieved. But $location.search('loaded_items', null); is reloading the page again and hence the loaded items seems to be items loaded repeated twice.
How can I achieve this?
Thanks in advance
Balu
As told by jbrown, I added the items to the service. Along with it,
ng-click call back will add the selected item id to the service. Now
when I click back button, the item list will be unaltered because it
is in the service. Using $anchorScroll in $timeout, the screen can be
scrolled to the exact item (using id) that was selected.
Thanks everyone.
I have an MVC page, with data being displayed in an AngularJS UI_Grid, which is all working fine, and showing 10, 20 or 50 rows to a page.
However, I need to be able to print the whole list of data, even the rows that are displayed due to the pagination, all at once. Has anyone succeeded in doing this yet please?
If you want to effectively print a different page (one view has paginated data, the other one has the whole set at once), it's usually best to provide a "print" button which opens a different view in a pop up that includes the other data. In this case, a non paginated view.
That page can then automatically do a window.print(); when all the data is rendered, and then close itself, so that the user doesn't have to do anything other than hit the print button.
I have three divs (on the same page)with different id that I would like to use pagination for. I am using CakePHP's inbuilt pagination method to bring about this. The first page for all the divs are displayed correctly. But if I am in the first page of the second div and click the next link, I get the next items of the first div.
And similarly, If there are no items for the third div for the second page, yet I get the items for the first div.
How can I go about setting up pagination to control the three lists independently?
There is a post about this on the Debuggable site.
How to have multiple paginated widgets on the same page with CakePHP
If you want to use inbuilt pagination, you won't be ale do this.
Thus, you have to write your own pagination. or just create new helper extends on the original one