菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 毛少涵2023-1-9 [打印本页]

作者: 微小星晨 时间: 2023-1-9 22:09
标题: 毛少涵2023-1-9

<script>
   const tbody = document.querySelector("tbody");
   const yema = document.querySelector("#yema");
   renderlist("http://162.14.107.109/list");
   function renderlist(url) {
      axios.get(url).then((res) => {
      let data = res.data.data;
      let list = data.data;
      let listhtml = "";
      list.forEach((item) => {
         listhtml += `
                  <tr>
                     <td>${item.id}</td>
                     <td>${item.name}</td>
                     <td>${item.sex}</td>
                     <td>${item.age}</td>
                     <td>${item.tel}</td>
                  </tr>
                  `;
      });
      tbody.innerHTML = listhtml;
      let current_page = data.current_page;

      let last_page = data.last_page;

      let links = data.links;

      let prev_page_url = data.prev_page_url;

      let next_page_url = data.next_page_url;

      let pageNum = "";
      for(let i=1;i<last_page;i++){
         pageNum+=`<button data-url="http://162.14.107.109/list?page=${i}">${i}</button>`;
      }
      let prev=`<button ${current_page==1 ? 'disabled':''} data-url='${prev_page_url}' class='btn'>上一页</button>`;
      let next=`<button ${current_page==last_page ? 'disabled':''} data-url='${next_page_url}' class='btn'>下一页</button>`;
      yema.innerHTML=prev+pageNum+next;
      });
   }
   yema.addEventListener('click',function(e){
         let url=e.target.dataset.url;
         renderlist(url);


      })
</script>

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)