Javascript 角度8分页自定义，不使用材质

我想在angular 8项目中进行分页，而不使用材质库。我收到一个包含10个数据行、第一页链接、最后一页链接和总页面的数组

来自服务器的响应：

{
    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,
}

---

如何使分页工作正常？

实际上，我是通过vanilla js为我的laravel（引导）应用程序进行分页的

@yasirali你几乎拥有一切。。仅缺少当前页面变量

我想它会帮助你

注意：通过减去表单

下一页的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; 
  }

如果您在最后一页或第一页

next\u page\u url

或

last\u page\u url

注意：如果您在最后一页或第一页。。然后检查您此刻得到的是什么

下一页\u url

或

上一页\u url

url。。如果您得到空值，则根据需要应用您的条件。。。（在laravel应用程序中，我将获得空值）

函数分页（数据）{
让分页=“”；
让cDisabled=data.prev_page_url==null？'disabled'：''；
让lDisabled=data.next_page_url==null？'disabled'：''；
让start=（data.current\u page-2）>0？（data.current\u page-2）：1；
let last=Math.ceil（data.total/data.per_page）；
让end=（（data.current\u page+2）

`;
如果（开始>1）{
分页+=`


`;
}  
对于（让我=开始；我的问题需要最小的可复制示例..plz@AbdullahAlNoor我添加了一些信息您有当前的页码吗？我更新我的ans…现在检查..如何从
下一页url
获取
当前的页码..@AbdullahAlNoor我想点击'post'api，但href会在'get'上自动完成。我有角度项目&由于api，该项目无法工作
 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;   
        }