I have a table on Angular, I have set a pagination for it, but I cannot limit the number of pages at the bottom. How can I provide this?
The part about pagination
<tr *ngFor="let obj of clientResults | slice: (page-1) * pageSize : (page -1) * pageSize + pageSize ;">
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<div class="col col-sm-6">
<div class="text-sm-right float-sm-end listjs-pagination">
<ngb-pagination
[collectionSize]="clientResults.length" [(page)]="page" [pageSize]="pageSize">
</ngb-pagination>
</div>
</div>
The part where the page and pageSize variables are defined
export class ClientResultComponent implements OnInit {
public page = 1;
public pageSize = 30;
}
This is the pagination I got. All pages are in a list. I want to limit it to 5 or 6 max because how can I do that?
From Api NgbPagination docs, you should look for this configuration
maxSize
The maximum number of pages to display.
Type: number
Default value: 0 — initialized from NgbPaginationConfig service
<ngb-pagination
[collectionSize]="clientResults.length"
[(page)]="page"
[pageSize]="pageSize"
[maxSize]="5">
</ngb-pagination>
Demo Advanced pagination
Related
I am working on a dummy API with jsonplaceholder, I am getting all posts after clicking button, but i wanna get userid and title on load,and after clicking title need to get that particular body of that id How can i achieve this.
in jasonplaceholder there are 100 posts with id,title,body. on clicking getdata i need only id and title after when I click on title I need to get body as either in paragraph or popup or something.
html
<button (click)="get()">Get Data</button>
<div class="col-md mt-4 mb-4">
<table class="table table-bordered">
<thead>
<tr>
<th>id</th>
<th>title</th>
<th>body</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let d of data">
<td><span>{{d.id}}</span></td>
<td><span>{{d.title}}</span></td>
<td><span>{{d.body}}</span></td>
</tr>
</tbody>
</table>
</div>
ts
get(){
this.userservice.getData().subscribe((data) =>{
console.log(data)
this.data = data
})
}
service
getData():Observable<any>{
const url = "https://jsonplaceholder.typicode.com/posts";
return this.http.get(url)
}
A simple solution would be to use *ngIf and a variable, eg. selectedId
<td (click)="showBody(d.id)"><span>{{d.title}}</span></td>
<td *ngIf="selectedId === d.id"><span>{{d.body}}</span></td>
Then in your component, initiate it:
selectedId: any = null;
and
showBody(id: number){
this.selectedId ? this.selectedId = null : this.selectedId = id;
}
so that it would hide the body if you click on the title again.
As I understand, you need to get the id of the element you clicked on it to show the element's body.
so to achive this, you can write something like this:
component.html
<tr *ngFor="let d of data" (click)="setBody(d)">
<td><span>{{d.id}}</span></td>
<td><span>{{d.title}}</span></td>
</tr>
<!-- Show selected item body here -->
<h1>Selected item body</h1>
<p>{{selectedItemBody}}</p>
component.ts file
[Optional]: you can define the POST interface top of your ts file to have more clean code:
interface POST {
id: number;
title: string;
body: string;
}
setBody(post: POST) {
this.selectedItemBody = post.body;
alert(this.selectedItemBody); // you can remove this alert
}
I provided you this sample working code here in stackblits
I have table with 212 rows and I would like to split them between pages so that all pages have 25 rows and last page 12 rows.
I would like to know if this is possible at all with Thymeleaf or should I use something else for that.
And is it possible to calculate total values per page also?
Here is the pdf file: https://www.docdroid.net/TSLdFA1/report1.pdf
the is sample code for the controller
#Controller
public class BookController {
#Autowired
private BookService bookService;
#RequestMapping(value = "/listBooks", method = RequestMethod.GET)
public String listBooks(
Model model,
#RequestParam("page") Optional<Integer> page,
#RequestParam("size") Optional<Integer> size) {
int currentPage = page.orElse(1);
int pageSize = size.orElse(5);
Page<Book> bookPage = bookService.findPaginated(PageRequest.of(currentPage - 1, pageSize));
model.addAttribute("bookPage", bookPage);
int totalPages = bookPage.getTotalPages();
if (totalPages > 0) {
List<Integer> pageNumbers = IntStream.rangeClosed(1, totalPages)
.boxed()
.collect(Collectors.toList());
model.addAttribute("pageNumbers", pageNumbers);
}
return "listBooks.html";
}
}
and here is Thymeleaf Template
<table border="1">
<thead>
<tr>
<th th:text="#{msg.id}" />
<th th:text="#{msg.name}" />
</tr>
</thead>
<tbody>
<tr th:each="book, iStat : ${bookPage.content}"
th:style="${iStat.odd}? 'font-weight: bold;'"
th:alt-title="${iStat.even}? 'even' : 'odd'">
<td th:text="${book.id}" />
<td th:text="${book.name}" />
</tr>
</tbody>
</table>
<div th:if="${bookPage.totalPages > 0}" class="pagination"
th:each="pageNumber : ${pageNumbers}">
<a th:href="#{/listBooks(size=${bookPage.size}, page=${pageNumber})}"
th:text=${pageNumber}
th:class="${pageNumber==bookPage.number + 1} ? active"></a>
</div>
Hi I want to iterate the data of firebase and need to display it in table.
Below is my firebase structure.I want to display the bill to, email id and po number in the tables.i can see the data in console.log, but its not populating in tables.
EDI855
Bill To
-L9ac7clRzSVT-EfGxYv:
"123456789"
-L9acDp2k34qDpubJFr6:
"123456780"
Email Id
-L9ac7cxYSALI3Ogj-nt:
"test#gmail.com"
-L9acDp87NO83OQutasK:
"test1#gmail.com"
Po Number
-L9ac7cvtNNzg7hYa355:
"123456789"
-L9acDp4PPOSo9VL9ysB:
"VV002"
Below is my html table:
div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>No</th>
<th>Bill To</th>
<th>Requested by</th>
<th>Po Number</th>
</tr>
</thead>
<tbody>
<tr>>
<td *ngFor="let x of items">{{x.$value}}</td>
</tr>
</tbody>
</table>
Below is my firebase code:
constructor(public af: AngularFire) {
af.database.list('/EDI855').subscribe(x =>{
this.items=x;
console.log(this.items)
}
Try implementing your query in the init event instead
export class MyComponent implements OnInit {
items;
constructor(public af: AngularFire) {
}
ngOnInit() {
this.af.database.list('/EDI855').subscribe(x =>{
this.items=x;
}
}
Or even better, to get the most out of the real-time database, you should consider using the async pipe. When you do that, your app will react to any changes on your data and immediately refresh the UI.
<td *ngFor="let x of items | async">{{x.$value}}</td>
Just that in this case, remember that you're changing the type of items (it is no longer the list of items, but an observable of items), than therefore, no need to subscribe to it. The async pipe will do the work.
constructor(public af: AngularFire) {
this.items = af.database.list('/EDI855');
}
I have an JSON which is loaded into my Angular2 App.
My JSON is called tempPromotion and i try to get into ['results'] the following way:
tempPromotion['response_payload']['ruleset_list']['results']
in ['results'] are 2 values, ['value_path'] and ['calculation']
my HTML looks like this:
<table class="table table-striped">
<thead>
<tr>
<th>Value Path</th>
<th>Result</th>
<th>TEST</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let result of rule['results']; let x = index">
<td><input type="text" class="form-control" id="valuePath{{x}}" [(ngModel)]="result['value_path']" name="valuePath{{x}}"></td>
<td><input type="text" class="form-control" id="discount{{x}}" [(ngModel)]="result['calculation']" name="discount{{x}}"></td>
<td>{{x}} {{result['calculation']}}</td>
</tr>
</tbody>
</table>
to understand why i use rule, this is alreay inside an other *ngfor <div class="card" *ngFor="let rule of tempPromotion['response_payload']['ruleset_list']; let i = index">
My output looks like this
channel 1 | #Value * 0.8 | 0 #Value * 0.9
channel 1 | #Value * 0.8 | 1 #Value * 0.8
My [(ngModel)] shows the wrong value, while my Two-way-binding {{result['calculation']}} shows the right value.
Why is this happening and what is the solution for this Problem?
I got it to work.
My Problem was that i had the same id / name for my inputs.
change id="valuePath{{x}}" to id="valuePath{{i}}{{x}}" fixxed it.
I want to add a pagination after the data that can be displayed has exceeded the filter. I have declared that a limit of 6 data can be displayed at a time. I want to display the rest of the data by adding a pagination under the table. How do I go about doing that?
data.html
<section>
<div>
<table style="width:90%" class="table table-bordered" align="center" ng-controller="RetrieveDiaryController">
<tr>
<th style="width:40%">Date</th>
<th style="width:30%">Type</th>
<th style="width:30%">Level</th>
</tr>
<tr ng-repeat="d in diaries | orderBy:'date':true | limitTo : limit">
<td>{{d.date | date: "dd-MM-yyyy"}}</td>
<td>{{d.taken}}</td>
<td>{{d.level}}</td>
<tr ng-show="limit" ng-click='limit = undefined'>
</tr>
</table>
</div>
</section>
health.js
.controller('RetrieveDiaryController', ['$scope', 'Diary', function ($scope, Diary) {
$scope.diaries = Diary.find();
$scope.limit = 6;
}])
You can use Angular ui bootstrap pagination directive.
And then add ng-show/ng-hide on the pagination depending on number of results per page.