latihan3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Exercise 3</title>
  
    <!-- Bootstrap CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>
<body>
  <div class="container-fluid mt-2 mb-2">
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" id="filter_table" onkeyup="FilterData()" placeholder="Cari Nama Planet ..." aria-label="Search">
      <button class="btn btn-primary" type="submit">Search</button>
    </form>
  </div>
        <table class="table" id="table">
                <thead class="thead-default">
                  <tr>
                    <th scope="col">name</th>
                    <th scope="col">rotation</th>
                    <th scope="col">orbital</th>
                    <th scope="col">diameter</th>
                    <th scope="col">climate</th>
                    <th scope="col">gravity</th>
                    <th scope="col">terrain</th>
                    <th scope="col">surface water</th>
                    <th scope="col">population</th>
                    <th scope="col">residents</th>
                    <th scope="col">films</th>    
                  </tr>
                </thead>
                <tbody id="get-data"></tbody>
        </table>
      
      <nav aria-label="Page navigation example"id="navigasi">
          <ul class="pagination justify-content-center">      
            <li class="page-item">
              <a class="page-link" id="nextButton" href="#navigasi">Load More</a>
            </li>
          </ul>
        </nav>  
      
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="latihan3.js"></script>
</body>
</html>