Carousel with a Table

Asked

Viewed 257 times

0

I have a table with Bootstrap and Datatables. But he wanted to do something as if it were a Carousel, that every X seconds he went to the next page, How can I do this with Html/Css/Javascript/Jquery. The idea is that this is a visualization-only panel, no mouse interaction will be used.

inserir a descrição da imagem aqui

Index : 

<!DOCTYPE html>
   <html lang="pt-br">

<head>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <link rel="stylesheet" href="app/css/index.css">
  <link rel="stylesheet" href="node_modules/bootstrap/dist/js/bootstrap.min.js">
  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css">
</head>

<body>
  <div class="block5 col-12">
    <div class="card">
      <div class="card-header">
        Evolução dos Embarques
      </div>
      <table class="table" id="mydata">
        <thead>
          <tr>
            <th>Rota</th>
            <th>Localidade</th>
            <th>Horário Previsto</th>
            <th>Horario Real</th>
            <th>Status</th>
            <th>Columm</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>100</td>
            <td>Juazeiro</td>
            <td>18:00</td>
            <td>18:15</td>
            <td>Finalizado c/ Atraso</td>
            <td>Columm</td>
          </tr>
          <tr>
            <td>120</td>
            <td>Juazeiro</td>
            <td>18:00</td>
            <td>18:15</td>
            <td>Finalizado c/ Atraso</td>
            <td>Columm</td>
          </tr>
          <tr>
            <td>130</td>
            <td>Juazeiro</td>
            <td>18:00</td>
            <td>18:15</td>
            <td>Finalizado c/ Atraso</td>
            <td>Columm</td>
          </tr>
          <tr>
            <td>105</td>
            <td>Juazeiro</td>
            <td>18:00</td>
            <td>18:15</td>
            <td>Finalizado c/ Atraso</td>
            <td>Columm</td>
          </tr>
          <tr>
            <td>100</td>
            <td>Juazeiro</td>
            <td>18:00</td>
            <td>18:15</td>
            <td>Finalizado c/ Atraso</td>
            <td>Columm</td>
          </tr>
          <tr>
            <td>100</td>
            <td>Juazeiro</td>
            <td>18:00</td>
            <td>18:15</td>
            <td>Finalizado c/ Atraso</td>
            <td>Columm</td>
          </tr>
          <tr>
            <td>100</td>
            <td>Juazeiro</td>
            <td>18:00</td>
            <td>18:15</td>
            <td>Finalizado c/ Atraso</td>
            <td>Columm</td>
          </tr>
          <tr>
            <td>100</td>
            <td>Juazeiro</td>
            <td>18:00</td>
            <td>18:15</td>
            <td>Finalizado c/ Atraso</td>
            <td>Columm</td>
          </tr>
          <tr>
            <td>100</td>
            <td>Juazeiro</td>
            <td>18:00</td>
            <td>18:15</td>
            <td>Finalizado c/ Atraso</td>
            <td>Columm</td>
          </tr>
          <tr>
            <td>100</td>
            <td>Juazeiro</td>
            <td>18:00</td>
            <td>18:15</td>
            <td>Finalizado c/ Atraso</td>
            <td>Columm</td>
          </tr>
          <tr>
            <td>100</td>
            <td>Juazeiro</td>
            <td>18:00</td>
            <td>18:15</td>
            <td>Finalizado c/ Atraso</td>
            <td>Columm</td>
          </tr>
          <tr>
            <td>100</td>
            <td>Juazeiro</td>
            <td>18:00</td>
            <td>18:15</td>
            <td>Finalizado c/ Atraso</td>
            <td>Columm</td>
          </tr>
          <tr>
            <td>100</td>
            <td>Juazeiro</td>
            <td>18:00</td>
            <td>18:15</td>
            <td>Finalizado c/ Atraso</td>
            <td>Columm</td>
          </tr>
          <tr>
            <td>100</td>
            <td>Juazeiro</td>
            <td>18:00</td>
            <td>18:15</td>
            <td>Finalizado c/ Atraso</td>
            <td>Columm</td>
          </tr>
          <tr>
            <td>100</td>
            <td>Juazeiro</td>
            <td>18:00</td>
            <td>18:15</td>
            <td>Finalizado c/ Atraso</td>
            <td>Columm</td>
          </tr>
          <tr>
            <td>100</td>
            <td>Juazeiro</td>
            <td>18:00</td>
            <td>18:15</td>
            <td>Finalizado c/ Atraso</td>
            <td>Columm</td>
          </tr>
          <tr>
            <td>100</td>
            <td>Juazeiro</td>
            <td>18:00</td>
            <td>18:15</td>
            <td>Finalizado c/ Atraso</td>
            <td>Columm</td>
          </tr>
        </tbody>
      </table>

    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"
    crossorigin="anonymous"></script>
  <script src="app/js/renderer.js"></script>
  <script src="app/connection.js"></script>
  <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
    crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
    crossorigin="anonymous"></script>
  <script>
    $('#mydata').dataTable({
      "searching": false,
      "bLengthChange": false,
      "pageLength": 5,
      "bInfo": false,
      "ordering": false
    });
  </script>

</body>

</html>`
javascript jquery bootstrap table electron

1 answer

1


I found the solution as follows.

$(document).ready( function () {
  var table = $('#example').DataTable({
    pageLength: 5
  });

  // Get the page info, so we know what the last is
  var pageInfo = table.page.info(),

      // Set the ending interval to the last page
      endInt = pageInfo.end,

      // Current page
      currentInt = 0,

      // Start an interval to go to the "next" page every 3 seconds
      interval = setInterval(function(){
          // "Next" ...
          table.page( currentInt ).draw( 'page' );

          // Increment the current page int
          currentInt++;

          // If were on the last page, reset the currentInt to the first page #
          if ( currentInt ===  endInt)
            currentInt = 0;

      }, 3000); // 3 seconds
} );

Browser other questions tagged javascript jquery bootstrap table electron

You are not signed in. Login or sign up in order to post.