时间戳

首页 > 解决方案 > 使用 JQuery 从 API 获取和显示数据

javascript - 使用 JQuery 从 API 获取和显示数据

问题描述

所以伙计们，我需要获取以下 API 数据：https ://api.github.com并将其放在 HTML 文件中。

所以这是我正在编写的 JavaScript 代码：

     async function getData() 
  {
    //await the response of the fetch call
    let response = await fetch('https://api.github.com');
    //proceed once the first promise is resolved.
    let data = await response.json()
    //proceed only when the second promise is resolved
    let newData = data.results;
    return newData;
  }
//call getData function
getData()
.then(function(result){
    $.each(result, (index, user) => {
      $('#character').append(`
        <div class='card'>
          <img
            src=${user.image}
            alt=''
            class='round-img'
          />
          <h4 class='card-name'>${user.name}</h4>
          <input id="collapsible" class="toggle" type="checkbox">
            <label for="collapsible" class="lbl-toggle">
              <i class='fas fa-chevron-down'> </i>
            </label>
          </input>
        </div>
      `)
    });
})

因此，我正在获取用户信息，但我需要将其显示在每页用户数量有限的列表中。我怎样才能做到这一点？

标签： javascriptjqueryhtmlapi

解决方案

如果您可以使用外部库，那么 Data Table 是一个很好的库，它将为您提供搜索、过滤、排序和分页功能。您只需要创建表并将该表的 id 传递给数据表库。它将照顾您的要求。您可以设置每页的最大项目数。

https://datatables.net/examples/basic_init/zero_configuration.html

推荐阅读