At angular 9, page no. reset when update collectionSize asynchronously. Code shown in below,
<ngb-pagination class="d-flex justify-content-end"
[collectionSize]="total | async"
[(page)]="page"
[pageSize]="pageSize | async"
[maxSize]="5"
[boundaryLinks]="true"
(pageChange)="pageChanged($event)"></ngb-pagination>
It was working fine if collectionSize didn't update.
Any solution here?
Related
I am looking for a CLEAN example that explains how pagination is done using thymeleaf and spring boot.
There are a lot of examples out there, but they are not complete.
I am actually looking for an example that implements pagination blocks as well. For example, if the total pages is 150, I would like the pages to show in blocks as in << 1 - 2 - 3 - 4 - 5... >>, when you click the arrows, the next block of pages would show as << 6 - 7 - 8 - 9 - 10... >>
Thank you
I found a simple solution using Java math methods: Math.max and Math.min as follows:
int current = page.getNumber() + 3;
int begin = Math.max(1, current - 5);
int end = Math.min(begin + 6, page.getTotalPages());
I then passed these variables to thymeleaf #numbers.sequence as in:
<li class="page-item"
th:each="i : ${#numbers.sequence(beginIndex, endIndex)} ">
<a th:href="#{/jobs(p=${i})}" th:text="${i}" class="nav-link"
th:classappend="${currentPage}==${i}?'activepagenumber':''"></a>
</li>
Adding onto Issmeil B. answer, just in case if you want to calculate the start and end index on the page, you can call the static class in the Math class. Eg
<div class="paginate-pagination"
th:with="current=${page.number + 3},
beginIndex=${T(java.lang.Math).max(0,current-5)},
endIndex=${T(java.lang.Math).min(begin + 6 , page.totalPages-1)}">
....
</div>
I am using custom filter to filter my data in a div content
<div id="refresh">
<div/>
// pagination
{{ $lists->links() }}
It will displayed all data when display the site.
Previous | 1 | 2 | 3 | Next
After i filter data, the content will be refreshed but the pagination still remain unchanged.
Previous | 1 | 2 | 3 | Next
It should be 2 pages, since data filtered only 2 pages but it shows 3 pages.
Previous | 1 | 2 | Next
I am using ajax to filter the data by refreshing the content data. It works fine but just the pagination do not update. Any solution to solve this issue?
Try to use
<div id="refresh">
<div/>
<script type="text/javascript">
setInterval(function () {
$('#refresh').load(document.URL + ' #refresh');
}, 1000)
</script>
I have a Ionic-1 app in which there's a large list that displays images (I use collection-repeat for this).
For now, I ship the images with the app. But the list evolves with time so my app gets the list from a server, then checks if there are new items, and use remote urls for new images.
The list is getting bigger (more tha 300 items), so managing this is quite heavy on the app. Moreover, shipping the images with the app is going to become impossible, because the .apk or .ipa are getting too big.
So I would like to use a better way to manage my images and also a better way to display them dynamically.
Is that possible to call the server images in my collection-repeat and to make it smooth and performant? Is that possible, that once an image has been called, it's saved in the local memory (maybe localStorage) so that the next time the list displayed it's faster ? If yes, how to do this ?
Is that the best way to manage a dynamical list? I would like to hear the best practice for this, for the best UX.
Here's my bit of code:
<div class="boardselection firstScreen" ng-if="transitionFinished">
<ion-item collection-repeat="item in prodataSelect | orderBy:data.sort | filter: data.selectBrand.brand:true | filter: data.selectName.name | filter: generalSearchFunc | filterObj:['brand','modelStrict']" item-width="25%" item-height="35%" item-render-buffer="16">
<a class="optionfuninit item-content" data-proid="{{item.id}}" on-tap="whatToDo(item.id,$event);" ng-class="item.fun == '0' ? 'aNormal' :( item.fun == '1' ? 'aSmallWave' : (item.fun == '2' ? 'aStepUp' : ''))">
<div class="listviewTrophy" ng-if="isWinning(item.id)">
<i class="icon ion-trophy"></i>
</div>
<i class="icon ion-female" ng-show="item.gender == 'female'"></i>
<!-- <p class="flex-caption" fittext fittext-min="10" fittext-max="15" ng-bind="item.modelStrict" >
{{item.modelStrict}}
</p> -->
<div class="listviewtexts flex-caption" ng-class="item.fun == '0' ? 'aNormal' :( item.fun == '1' ? 'aSmallWave' : (item.fun == '2' ? 'aStepUp' : ''))">
<span class="listviewtextsmodel">{{item.modelStrict}}</span>
</div>
<div class="imagebox">
<img class="imageoptionsmodel " ng-src="{{imagesUrls[item.imageName]}}"/>
</div>
</a>
</ion-item>
you can use ionic-cache-src (https://github.com/BenBBear/ionic-cache-src)
it will work like :
or
you can use $ImageCacheFactory to save it in cache,
docs here.
I am attempting to capture a line of text for an automated WebDriver test to use it in a comparison later on. However, I cannot find an XPath that will work with WebDriver. I have used the text() function before to capture text that is not in a tag, but in this instance that is not working. Here is the HTML, note that this text will never be the same, so I cannot use contains or similar functions.
<div id="content" class="center ui-content" data-role="content" role="main">
<div data-iscroll="scroller">
<div class="ui-corner-all ui-controlgroup ui-controlgroup-vertical" data-role="controlgroup">
<a class="ui-btn ui-corner-top ui-btn-hover-c" style="text-align: left" data-role="button" onclick="onDocumentClicked(21228772, "document.php?loan=********&folderseq=0&itemnum=21228772&pageCount=3&imageTypeName=1003 Application - Final&firstInitial=&lastName=")" href="#" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c">
<span class="ui-btn-inner ui-corner-top">
<span class="ui-btn-text">
<img class="checkMark checkMark21228772 notViewedCompletely" width="15" height="15" title="You have not yet viewed this document." src="../images/white_dot.gif"/>
1003 Application - Final. (Jan 11 2012 5:04PM)
</span>
</span>
</a>
In this example, the text I am attempting to capture is: 1003 Application - Final. (Jan 11 2012 5:04PM)
I have inspected the element with Firebug and I have tried the following XPaths with no success.
html/body/div[1]/div[2]/div/div/a[1]/span/span
html/body/div[1]/div[2]/div/div/a[1]/span/span/text()
The WebDriver test is being written in C#.
You can either use this
driver.FindElement(By.XPath(".//div[#id='content']/following-sibling::span[#class='ui-btn-text']")
or
var elem = driver.FindElement(By.Id("Content"));
string text = string.Empty;
if(elem!=null) {
var textElem = elem.FindElement(By.Xpath(".//following-sibling::span[#class='ui-btn-text']"));
if(textElem!=null) text = textElem.Text();
}
I was able to solve this issue by removing the span tags from the XPath.
GetText("html/body/div[3]/div[2]/div/div/a[1]", SelectorType.XPath);
python webdriver code looks something like
driver.find_element_by_xpath("//span[#class='ui-btn-text']").text
But locator may be not uniqe, because I can't see all the code
PS Try to never use locators like html/body/div[1]/div[2]/div/div/a[1]/span/span
Approach:
Find the CSS Selector from the Given DOM
Derived CSS:css=#content div.ui-controlgroup > a[onclick*='onDocumentClicked'] > span > span
Use the C# Library Method to get the Text.
I am working on XPath script.I want xpath for the following tag.
<td valign="top">
" Oct 17, 2011 "
<br>
" 3 Pages - Pub ID: KLI6673261"
I want xpath to get text after <br> tag.Means I want to fetch only [3 Pages - Pub ID: KLI6673261].Please guide me.
Thanks.
You can get all text following a <br> in a <td> like this:
/td/br/following-sibling::text()
Although if your xml/html doesn't auto close the <br>, it will think the text is inside the br, and you would need this
/td/br/text()