Angular 8 Pagination custom without using material

Question

I want to make pagination in angular 8 project without using material library. I receive an array that include 10 data rows, first page link, last page link and total pages.

Response from Server:

{
    data : [
        {name: 'abc': id: 1},
        {name: 'abc': id: 2},
        {name: 'abc': id: 3},
        {name: 'abc': id: 4}
    ],
    first_page_url: "http://example.com/api/data?page=1"
    from: 1,
    last_page: 5,
    last_page_url: "http://example.com/api/data?page=5",
    next_page_url: "http://example.com/api/data?page=2",
    path: "http://example.com/api/data",
    per_page: 30,
    prev_page_url: null,
    to: 30,
    total: 123,
}

How can i make pagination working?

question needs minimal reproducible example.. plz [read](https://stackoverflow.com/help/minimal-reproducible-example) — نور, Sep 02 '20 at 07:12
I update my ans ... check now ..how can you get `current_page` number from `next_page_url` ... — نور, Sep 03 '20 at 10:45
@AbdullahAlNoor i want to hit 'post' api but href automatically do it on 'Get'. i have an angular project & this is not working because of an api — yasir ali, Sep 03 '20 at 11:54
did you mean post request ? or ajax request ? make me to help you.... — نور, Sep 03 '20 at 12:04
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/220914/discussion-between-abdullah-al-noor-and-yasir-ali). — نور, Sep 03 '20 at 12:05

نور · Accepted Answer · 2020-09-03T11:23:15.087

Actually i did it for my laravel (bootstrap) application by vanilla js..

@yasirali you have almost everything .. only current_page variable is missing..

I think it will help you...

Note: you can easily get current page number (current_page ) by subtracting form next_page_url :http://example.com/api/data?page=5

var last_page_url = "http://example.com/api/data?page=5";
   var last_page = last_page_url.split("=");
   
  var  next_page_url = 'http://example.com/api/data?page=1';
  var current_page = next_page_url.split("=");
  
  if(current_page[1] != 1 || current_page[1] != last_page[1]){
    current_page = current_page[1] - 1; 
  }else if (current_page[1] == last_page[1]){
    current_page = last_page[1]; 
  }else if (current_page[1] == 1){
    current_page = 1; 
  }

if you are on last page or first page next_page_url or last_page_url you do not need subtract

Note: if you are on last page or first page .. then check what are you getting this moment next_page_url or last_page_url url.. if you get null then apply your condition as per as you need ... (in laravel app i am getting null) ...

 function paginate (data){
            let pagination = '';
            let cDisabled = data.prev_page_url == null ? 'disabled' : '';
            let lDisabled = data.next_page_url == null ? 'disabled' : '';

            let start = ( data.current_page -2 )  > 0 ?  (data.current_page -2)  : 1 ;
            let last = Math.ceil(data.total /data.per_page) ;
            let end = ((data.current_page +2)  < last)  ?  (data.current_page +2 ) : last ;
            pagination += `
                       <li class="page-item ${cDisabled}"><a class="page-link" href="${data.first_page_url}">First</a></li>
                       <li class="page-item ${cDisabled}"><a class="page-link" href="${data.prev_page_url}">Previous</a></li>
               `;
          
            if(   start > 1   ){
                pagination +=    `
                <li class="page-item ${cDisabled}"><a class="page-link" href="${data.first_page_url}">1</a></li>
                <li class="page-item "><a class="page-link" href="#" >...</a></li>
                    
                    `;
                }  

                for(let i= start ; i <= end ; i++){
                    var active = data.current_page == i ? 'active' : false;
              
                    pagination += ` 
                        <li class="page-item ${active}"><a class="page-link" href="${data.path}?page=${i}">${i}</a></li>
                        `;
                }
             

            if(end < last){
                pagination +=    `
                <li class="page-item ${lDisabled}"><a class="page-link" href="#">...</a></li>
                <li class="page-item ${lDisabled}"><a class="page-link" href="${data.last_page_url}">${last }</a></li>
                    
                    `;
                }     

            pagination  += `      
                            <li class="page-item ${lDisabled}"><a class="page-link" href="${data.next_page_url}">Next</a></li>
                            <li class="page-item ${lDisabled}"><a class="page-link" href="${data.last_page_url}">Last</a></li> 
                            `;                      
            document.getElementById("pagination").innerHTML = pagination;   
        }

score 0 · Answer 2 · answered Jan 01 '22 at 17:53

You has all. If you has a variable "page" and a variable "total", and "last_page" you can write

<button (click)="getData(-1)">prev</button>
{{page}}/ {{last_page}}
<button (click)="getData(1)">next</button>
</ng-container>

getData(incr)
{
    this.page+=incr
    this.service.getElements(page).subscribe(res=>{
            this.data=res.data;
            this.total=total;
            this.last_page=res.last_page
    })
}

Angular 8 Pagination custom without using material

2 Answers2