Need Help on Navigation bar from java script using data tables

Question

I have a sample file with me that working for test to my main html so far I have manage to search and call api from the database now I want to have a navigation bar with a scrollable bar horizontal how can I do it ? I would like my pagination to have some page like maybe 10 row for I page etc

I would not want to create pagination row by row as this is dynamic for my client based

kindly looking for help to figure out this

I am still looking for help currently my pagination number would not show up when i load into .table

need help for issue

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  <script src="../../assets/js/table_row_highlight.js"></script>
  <style>
    .highlight {
      background-color: #ddd;
    }
    
    button {
      display: inline-block;
      width: 100px;
    }
    
    .dark {
      background-color: #000;
      color: #666;
    }
  </style>

    <!-- Favicons -->
        <link rel="icon" href="../../assets/images/icon-32x32.png">
        <link rel="icon" href="../../assets/images/icon-192x192.png">

</head>

<body>
          
        
  <main class="fluid-container">

      <input class="search-input form-control" placeholder="Recyclable Name" type="text" name="Recyclable Name" id="myInput"  >
    <fieldset class='btn-group'>
      <button class='add btn btn-success'>Add Row</button>
      <button class='dark edit btn btn-primary disabled change-row' disabled>Edit</button>
      <button class='type btn btn-warning'>Add Type</button>
      <button class='dark delete btn btn-danger disabled change-row' disabled>Delete</button>
    </fieldset>
    <table class="table">
      <thead>
        <tr>
          <th>RecyclableID</th>
          <th>Name</th>
          <th>RecyclableType</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </main>
 

      

    <script>
     
    </script>

        <script>



          const buildTable = data => {
        const table = document.querySelector('.table tbody');
  
        for (let i = 0; i < data.length; i++) {
          let row = `<tr>
      <td>${data[i].RecyclableID}</td>
      <td>${data[i].Name}</td>
      <td>${data[i].RecyclableType}</td>
      </tr>`;
          table.insertAdjacentHTML('beforeEnd', row);
        }
      };
  
      const getData = async(url) => {
  
        const response = await fetch(url, {
          method: 'GET',
          headers: {
            query:"RecyclableGet(0)",
          
          // Gets the apikey from the sessionStorage
          apikey:sessionStorage.getItem("apikey")
      }
        });
        const json = await response.json();
        return buildTable(json);
      };
       getData('https://ecoexchange.dscloud.me:8080/api/get');
    
      </script>

      <script>
            
          $('#myInput').on('keyup',function(){
                                    var valThis = $(this).val().toLowerCase();    
                                    if(valThis == ""){
                                        $('.table tbody tr').show();
                                    } else {
                                        $('.table tbody tr').each(function(i,item){
                                        var text = $(item).text().toLowerCase();

                                        //console.log($(item).find('tr').text());

                                        if(text.indexOf(valThis) >= 0) {
                                        $(item).show()         
                                        }
                                        else{
                                            $(item).hide();
                                        }
                                    });
                                    };
                                });
    
      </script>


  </main>
  <footer>
    <div class="overlay"></div>
    <img src="../../assets/images/wave.png" alt="">
  </footer>



</script>
</body>
</html>

This is how it look like in html

I would like someone who expert in css to make this for my prototype style Im not sure if is possible but defintely I would like to try it out

still looking for help with this – Flow Dec 06 '21 at 14:16 — Flow, Dec 06 '21 at 14:16

denns · Answer 1 · 2021-12-06T13:32:59.820

0

You are using bootstrap, so simply add the bootstrap pagination: https://getbootstrap.com/docs/3.3/components/#pagination

For implementing a simple pagination with javascript: Simple pagination in javascript maybe this helps

edited Dec 06 '21 at 13:32

answered Dec 06 '21 at 13:22

denns

1,105
1
11
24

Thanks didnt realize that is it possible to make for my prototype style for navigation bar ? – Flow Dec 06 '21 at 13:23
but i realize based on the bootstrap the example are created using sample 1 2 3 4 5 i would like it to auto if 10 row created 1 page is it possible – Flow Dec 06 '21 at 13:25
you would need either javascript techniques or some server side language like php to achieve this. so this is a whole different topic. – denns Dec 06 '21 at 13:27
ah i did put the tag as javascript but i guess maybe the topic wasnt that good – Flow Dec 06 '21 at 13:28

Need Help on Navigation bar from java script using data tables

1 Answers1