problem on Pagination (2nd page only)
There is a weird issue that is happening in my project in my p-table, Pagination works well except when i'm trying to get to the 2nd page, on that case it calls to the "onLazyLoad" event twice: first time with the right parameters (rows,first) , the 2nd time it calls with (rows,first) that rout to the first page (same happening with the arrows of the paginator from 1st page to 2nd page and also from 3rd page to the 2nd)
happens only on that case means that i cannot get the 2 page ever!
<p-table datakey="Id"
[loading]="loading"
[value]="games"
[paginator]="true"
[rows]="20"
[rowsPerPageOptions]="[5,10,20]"
[lazy]="true"
(onLazyLoad)="loadGamesLazy($event)"
[totalRecords]="gamesCount"
responsive="true"
[filters]="filterForm.value"
>
loadGamesLazy(event: any) {
setTimeout(() => {
this.lazyGames.emit(event);
}, 0);
}
Starting with 6.1.1, you can do [lazyLoadOnInit]="false" which will prevent the load at ngOnInit.
Related
Imagine I have page A with very long list of rows. I scroll down to e.g. row number 500. The row is also link to page B, that shows row details. After examinig the details on page B, I want to go back to page A, but I want to return to exactly same point, from where I went to page B, that means on the row 500. How can I achieve this behavior in ReactJS app?
This can be achieved in two ways.
One simple use of html id attributes.
With the help of react-router-dom and props passing.
I have listed the method 1 here which is beginner friendly
This can be achieved with the help of id's
I will list a sample html code which works similar at jsx
<div>
<p id="1">Row 1 </p>
<p id="2">Row 2 </p>
...
...
...
</div>
Let's suppose the use of the page is www.samplepage.com
Instead of this link if I made it specific i.e., www.samplepage.com#1
it will take me to the Row 1 it is like anchor tag in same page
you can store the tags in state and use it.
You can also see similar implementation at github
First pass your current path with query parameter
<Link to={{pathname: `/apps/calendar`, query: `/apps/personnel/view/${selectedPersonnel.id}`}} >
Second use this parameter in redirected component with following code
const CalendarComponent = props => {
const backUrl = props.location['query']
}
I am using antd table in my application. I have also used pagination with it. Further I have custom settings of displaying 10 records per page and the records I am getting from the database are 11, now being on second page if I delete the last record which will be the only record on second page, I do get back only 10 records but my page still remains 2 instead going back to 1. How do I cater this? Any help will be appreciated.
<Table
columns={columns}
dataSource={data}
pagination={{
defaultPageSize: 10,
position: ["none", "bottomCenter"],
total: count,
showSizeChanger: true,
current: page,
onChange: (page, pageSize) => onTabChange(page, pageSize), //this only fires if I
click on any page number
}}
/>
Edit: I have created a small demo to show the problem I am facing here on sandbox https://codesandbox.io/s/pagination-settings-antd4151-forked-ilz3l?file=/index.js
Here if you delete the last item from page 3 while keeping the console open, you will see the page still remains 3 instead of changing to 2, how to resolve this?
Just sync page number to react state after response is ok.
You can calculate current page number by total count (back-end should provide) and current page size (front-end known or back-end provided) like this:
this.setState({
page: Math.ceil(total / pageSize),
});
I have created a table with the Antd in Reactjs. I have used 50 rows per page and I have around 6 pages that come up in the pagination.
I have added an index column to the table, which loops from 1 to 50 on every page.
Rather I need it to loop from 1 to full length. So when I navigate to page 2, It must show 51 to 100, whereas in my case it loops from 1 to 50 again. I made use of "index",that is passed from the "render" function in the table.
function indexRenderer(text, record, index) {
return index+1
}
Is there any seperate function I can use to retrieve the page count alone from the pagination of antd.
You can use onChange function of Pagination component.
It will be called with page parameter.
Check this out for more information:
https://ant.design/components/pagination/
Hello am developing a web application using Oracle ADF and jdev12c. I have a page like below.
The above page is created using a template. That contains three parts. First part is image, second part is deck with more than one panel group layout (Here deck child value is decided using a value from managed bean of scope session.)and third part is actual content facet in this I have dropped a task-flow(bouded) as a region contain .jsff pages.
My problem is every thing is working fine. af:showPrintableBehavior is not working. When I click on the Printable view button am getting the following exception. After the following exception nothing is working in my application. (If I click on any commndLink it is opening in another tab and repeatedly trying to generate the page content for example the table but not displaying the content)
exception
java.lang.IllegalArgumentException
org.apache.myfaces.trinidad.model.RowKeySetTreeImpl.setCollectionModel(RowKeySetTreeImpl.java:315)
org.apache.myfaces.trinidad.component.UIXListView$RowKeyFacesBeanWrapper.getProperty(UIXListView.java:300)
org.apache.myfaces.trinidad.component.FacesBeanWrapper.getProperty(FacesBeanWrapper.java:61)
oracle.adf.view.rich.component.rich.data.RichListView$ListViewBeanWrapper.getProperty(RichListView.java:178)
org.apache.myfaces.trinidad.component.UIXComponentBase.getProperty(UIXComponentBase.java:1912)
org.apache.myfaces.trinidad.component.UIXListView.getSelectedRowKeys(UIXListView.java:451)
org.apache.myfaces.trinidad.component.UIXListView.postCreateCollectionModel(UIXListView.java:157)
org.apache.myfaces.trinidad.component.UIXCollection.getCollectionModel(UIXCollection.java:1671)
org.apache.myfaces.trinidad.component.UIXCollection.getCollectionModel(UIXCollection.java:1255)
org.apache.myfaces.trinidad.component.UIXCollection.getRowKey(UIXCollection.java:493)
oracle.adf.view.rich.component.rich.data.RichListView.visitChildren(RichListView.java:103)
org.apache.myfaces.trinidad.component.UIXComponent.visitChildren(UIXComponent.java:774)
org.apache.myfaces.trinidad.component.UIXComponent.visitTree(UIXComponent.java:631)
org.apache.myfaces.trinidad.component.UIXComponent.visitTree(UIXComponent.java:405)
org.apache.myfaces.trinidad.component.UIXComponent.visitAllChildren(UIXComponent.java:504)
org.apache.myfaces.trinidad.component.UIXComponent.visitChildren(UIXComponent.java:482)
org.apache.myfaces.trinidad.component.UIXComponent.visitChildren(UIXComponent.java:774)
org.apache.myfaces.trinidad.component.UIXComponent.visitTree(UIXComponent.java:631)
org.apache.myfaces.trinidad.component.UIXComponent.visitTree(UIXComponent.java:405)
org.apache.myfaces.trinidad.component.UIXComponent.visitAllChildren(UIXComponent.java:504)
This is not working in only this page. I have tested this in one empty page that is created without using this template. In that empty page I have created this table and tried with af:showPrintableBehavior and here this behaviour is working fine.
Please help me. How to remove the above exception. Export to excel is working fine.
Thanks in advance.
Try using a clientListener inside the button that prints the page, then stop the event from propagating further:
<af:resource type="javascript">
/**
* Shows a popup from an "action" type event.
* #param {AdfActionEvent} actionEvent the event being handled
*/
function stopEventFromPropagating(actionEvent)
{
actionEvent.cancel();
}
</af:resource>
<af:commandButton text="Click Me">
<af:clientListener type="action" method="stopEventFromPropagating"/>
</af:commandButton>
I've been trying to get this to work for 4 days now, with no luck.
I have a very simple jquery mobile app.
The app has a header, content and footer.
The footer is being generated dynamically on the 'pagecreate' event because it is always the same and I don't want to have its HTML in every page.
So I do something like this:
$(document).delegate('[data-role="page"]', 'pagecreate', function (e) {
DrawHeader($(this));
DrawFooter($(this));
SetFooterEvents($(this));
SetActiveFooter($(this));
});
DrawHeader() and DrawFooter() simply prepent the header div to the page and append the footer div.
SetFooterEvents() sets the onclick events of the footer navbar buttons and SetActiveFooter() is SUPPOSED to set the ui-btn-active to the current active footer link.
To do this, I've added the data-active-footer attribute to the page div and the data-name attribute to the navbar elements. I'm searching for the current element according to the data-active-footer in the page and apply the ui-btn-active class.
function SetActiveFooter(page) {
page.children('div[data-role="footer"]')
.find('a[data-name="' + page
.attr("data-active-footer") + '"]').addClass("ui-btn-active");}
So far so good.
Now, say I've changed to a page and the navbar is lit (it has successfully recieved the ui-btn-active class), and I'm clicking on the previous page, the lit item in the navbar doesnt change back!
If i click on the the page again (ie: changed to second page [corrent lit], changed back to first page [second page is still lit], then clicked on first page again) it does light the navbar button.
What I found out was that jqm also changed the navbar of the previous page when I'm changing the navbar of the current page in the 'pagecreate' event.
I've tried to overwrite this behaviour using the 'pageshow' event, that is, trying to apply the ui-btn-active class to the current element in the navbar but the problem is that $(this) and e.currentTarget objects in the 'pageshow' event DO NOT CONTAIN THE FOOTER ELEMENT!!!
$(".ui-page").live('pageshow', function (e) {
alert($(this).children('div').length); // returns 2!
alert($(this).children('div[data-role="footer"]').length); //returns 0
alert($(e.currentTarget).children('div').length); // returns 2!
alert($(e.currentTarget).children('div[data-role="footer"]').length); //returns 0});
Any ideas?!
Thanks.
Before delving into more detail, please try adding .ui-state-persist together with .ui-btn-active
This makes sure active buttons stay active when you changePage and the footer is the same. Also make sure, all your footers have the same data-id attribute.
On a sidenote: check the latest blog post about upcoming features for jqm 1.1 - it will include a fetch link utility, which allows to ajax-update portions of a page. So you could use this functionality to grab and insert a footer on every page. I'm trying the same right now with a login form, which I need on every page.
Have you tried "ui-state-persist"?
<div data-role="navbar" data-iconpos="top">
<ul>
<li>Home</li>
<li>Favorite</li>
</ul>
</div>
I still dont know why but jqm moves the footer from page to page, eventhough I assign a new footer to each page.
Maybe because I set the same ID to all of them.
Anyhow, I used this workaround to solve the problem:
On the 'pagebeforeshow' event, I set the button I want active to all the footers in the documents. I've set a special data-name attribute to each navbar button, I give it the 'ui-btn-active' class after removing it from the rest of the items.
var $footers = $(document).find('div[data-role="footer"]');
$footers.find('a').removeClass("ui-btn-active");
$footers.find('a[data-name="' + page
.attr("data-active-footer") + '"]').addClass("ui-btn-active");