Untitled

<html lang="en">
  <head>
    <title>Hello, world!</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!--  Fonts and icons -->
    <!--  Fonts and icons -->
    <link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet">
    <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

    <!-- Nucleo Icons -->
    <link href="assets/css/nucleo-icons.css" rel="stylesheet" />
    <!-- CSS Files -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
    <link href="assets/css/black-dashboard.css?v=1.0.0" rel="stylesheet" />
  </head>
  <body>

  <?php
    require('checklogincookie.php');
  ?>

  <div class="wrapper ">
  <div class="sidebar" data-color="grey" data-background-color="white">
    <div class="logo">
      <a class="simple-text logo-normal">
        <?php echo $loggeduser['nombre'] ?>
      </a>
    </div>

    <div class="sidebar-wrapper">
      <ul class="nav">
        <li>
            <a class="nav-link" href="./dashboard.php">
                <i class="tim-icons icon-chart-pie-36"></i>
                <p class="text-sidebar"><b>Dashboard</b></p>
            </a>
        </li>
        <li class="nav-item active">
            <a href="./productos.html">
              <i class="tim-icons icon-atom"></i>
              <p class="text-sidebar"><b>Productos</b></p>
            </a>
        </li>
      </ul>
    </div>
  </div>
  <div class="main-panel">
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top ">
      <div class="container-fluid">
        <div class="navbar-wrapper">
            <div class="navbar-toggle d-inline">
              <button type="button" class="navbar-toggler">
                <span class="navbar-toggler-bar bar1"></span>
                <span class="navbar-toggler-bar bar2"></span>
                <span class="navbar-toggler-bar bar3"></span>
              </button>
            </div>
        </div>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-bar navbar-kebab"></span>
            <span class="navbar-toggler-bar navbar-kebab"></span>
            <span class="navbar-toggler-bar navbar-kebab"></span>
          </button>

        <div class="collapse navbar-collapse justify-content-end" id="navigation">
          <ul class="navbar-nav ml-auto">
            <li class="dropdown nav-item">
              <a class="nav-link" href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">
                <i class="tim-icons icon-bell-55"></i>
              </a>
              <ul class="dropdown-menu dropdown-menu-right dropdown-navbar">
                <li class="nav-link">
                  <a href="#" class="nav-item dropdown-item">Historial de Pagos</a>
                </li>
                <div class="dropdown-divider"></div>
                <li class="nav-link">
                  <a href="logout.php" class="nav-item dropdown-item">Cerrar sesión</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- End Navbar -->

    <div class="content">
      <div class="container-fluid">

        <?php

          // pulleamos los productos
          $servername = "localhost";
          $username = "id6930445_roototro";
          $password = "nombredelproducto";

          // Create connection
          $conn = new mysqli($servername, $username, $password, $nombresucursal);

          // Check connection
          if ($conn->connect_error) {
              die("Connection failed: " . $conn->connect_error);
          }

          if(!isset($_GET['paginas'])) // si es la pagina "default" calculamos la cantidad de paginas
          {
            $query = $conn->query("SELECT * FROM `productos`");
            $paginas = intdiv($query->num_rows, 10) + 1;
          } else {
            $paginas = $_GET['paginas'];
          }

          if(isset($_GET['page']))
          {
            $off = 10 * ($_GET['page'] - 1);
            $result = $conn->query("SELECT * FROM `productos` LIMIT 10 OFFSET " . $off);
          }
          else
            $result = $conn->query("SELECT * FROM `productos` LIMIT 10");
        ?>

         <!-- CONTENIDO DE LA PAGINA -->
         <div class="row">
          <div class="col-md-12">
            <div class="card ">
              <div class="card-header">
                <h2 class="card-title">Productos</h2>
                <form action='' method='post'>
                    <input type='text' id="nombreauto" name="nombreauto" class="form-control" placeholder="buscar" value=''>
                </form>
              </div>
              <div class="card-body">
                <div class="table-responsive">
                  <table class="table tablesorter " id="productosOriginal">
                    <thead class= "text-primary">
                      <th>
                        id
                      </th>
                      <th>
                        Nombre
                      </th>
                      <th class="text-center">
                        Stock
                      </th>
                      <th class="text-center">
                        Costo
                      </th>
                      <th class="text-center">
                        Precio
                      </th>
                    </thead>
                    <tbody>
                      <?php

                      if ($result) {
                        while($row = mysqli_fetch_assoc($result)) {
                              echo '<tr>';
                              echo '<td> ' . $row['id'] . '</td>';
                              echo '<td> ' . $row['nombre'] . '</td>';
                              echo '<td class="text-center"> ' . $row['stock'] . '</td>';
                              echo '<td class="text-center"> $' . $row['costo'] . '</td>';
                              echo '<td class="text-center"> $' . $row['precio'] . '</td>';
                              echo '</tr>';
                        }
                      }

                      ?>
                    </tbody>
                  </table>
                </div>
              </div>

              <div class="container">
                <nav>
                  <ul class="pagination justify-content-center pg-blue">
                    <?php

                      if(!isset($_GET['page']) || $_GET['page'] == 1)
                        echo '<li class="page-item disabled"><a class="page-link"> <-</a></li>';
                      else
                        echo '<li class="page-item"><a class="page-link" href="productos.php?paginas=' . $paginas . '&page=' . ($_GET['page'] - 1) . '"> <-</a></li>';

                      for($i = 1; $i <= $paginas; $i++)
                      {
                        if(isset($_GET['page']) && $_GET['page'] == $i)
                          echo '<li class="page-item active"><a class="page-link" href="productos.php?paginas=' . $paginas . '&page=' . $i . '">' . $i . '</a></li>';
                        else
                          echo '<li class="page-item"><a class="page-link" href="productos.php?paginas=' . $paginas . '&page=' . $i . '">' . $i . '</a></li>';
                      }

                      if(!isset($_GET['page']) || $_GET['page'] == $paginas)
                        echo '<li class="page-item disabled"><a class="page-link"> -></a></li>';
                      else
                        echo '<li class="page-item"><a class="page-link" href="productos.php?paginas=' . $paginas . '&page=' . ($_GET['page'] + 1) . '"> -></a></li>';
                    ?>
                  </ul>
                </nav>
              </div>
            </div>
          </div>
        </div>
         <!-- FIN CONTENIDO DE LA PAGINA -->

      </div>
    </div>
    <footer class="footer">
      <div class="container-fluid">
        <nav class="float-left">
          <ul>
              <li>
                  <a href="https://www.creative-tim.com">
                      Nombre del PRODUTO
                  </a>
              </li>
          </ul>
        </nav>
        <div class="copyright float-right">
            &copy;
            <script>
                document.write(new Date().getFullYear())
            </script>, powered by
            <a href="https://www.creative-tim.com" target="_blank">Creative Tim</a>.
        </div>

         <!-- your footer here -->
      </div>
    </footer>
  </div>
</div>

<!--   Core JS Files   -->
<script src="assets/js/core/popper.min.js" type="text/javascript"></script>
<script src="assets/js/core/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<!-- Chartist JS -->
<script src="assets/js/plugins/chartjs.min.js"></script>
<!--  Notifications Plugin    -->
<script src="assets/js/plugins/bootstrap-notify.js"></script>
<!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
<script src="assets/js/black-dashboard.js" type="text/javascript"></script>

<!-- autocompletar -->
<script type="text/javascript">
  $(function() {
      /*$("#nombreauto").autocomplete({
          source: "searchProductos.php"
      });*/

      $('#nombreauto').on('input', function() {

        var val = this.value;

        $.ajax({
            url: "searchProductos.php",
            type: 'get',
            data: {term: this.value},
            dataType: 'json',
            success: function(json) {

                var str = json;

                if(json.length > 0 && val.length > 0)
                {

                } else { // si no hay resultados hacemos una query vacia que pullee todos los datos
                    $.ajax({
                        url: "searchProductos.php",
                        type: 'get',
                        data: {term: ""},
                        dataType: 'json',
                        success: function(newJson) {
                            str = newJson;
                        }
                    });
                }

                // vaciamos la tabla y metemos la info
                $("#productosOriginal").empty();
                $("#productosOriginal").append("<thead class= \"text-primary\"><th>id</th><th>Nombre</th><th class=\"text-center\">Stock</th><th class=\"text-center\">Costo</th><th class=\"text-center\">Precio</th></thead><tbody>");

                //json = JSON.stringify(json);
                var len = str.length;

                if(str.length > 10)
                    len = 10;

                for (var i = 0; i < len; i++)
                {
                    $("#productosOriginal").append("<tr><td>" + str[i]['id'] +
                    "</td><td>" + str[i]['nombre'] + "</td><td>" + str[i]['stock'] + "</td>" +
                    "<td>" + str[i]['costo'] + "</td><td>" + str[i]['precio'] + "</td></tr>");
                }

                $("#productosOriginal").append("</tbody>");
            }
        });
      });
    }
  );

// acordate de cambiar el searchProductos.php para que devuelva todo en vez de solo el nombre !!
</script>

</body>
</html>