<div class="container-fluid mt-5 pt-4">
  <div class="card shadow p-4">
    
    <div class="table-responsive">
      <input id="miBuscador" class="form-control form-control-lg mb-3" placeholder="Buscar..." />

      <table id="tabla" class="table table-striped table-bordered align-middle">
        <thead class="table-dark text-center">
          <tr>
            <th>Fecha de registro</th>
            <th>Número de DNI</th>
            <th>Nombres</th>
            <th>Sede</th>
          </tr>
        </thead>
        <tbody>
            <?php foreach ($registros as $reg) { ?>
          <tr>
            <td><?= esc($reg['fecha_ingreso'])?></td>
            <td><?= esc($reg['dni'])?></td>
            <td><?= esc($reg['nombres'])?></td>
            <td><?= esc($reg['nombre_sede'])?></td>
          </tr>

          <?php } ?>
          <!-- Más filas dinámicas aquí -->
        </tbody>
      </table>
    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

  <!-- Bootstrap JS (bundle incluye Popper) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

  <!-- Bootstrap Table JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.1/dist/bootstrap-table.min.js"></script>
  <!-- (Opcional) Locale español para textos de la tabla -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.1/dist/locale/bootstrap-table-es-ES.min.js"></script>

  <script>
    $(function () {
      $('#tabla').bootstrapTable({
        locale: 'es-ES',     // textos en español (requiere el script de locale)
        search: true,        // barra de búsqueda
		searchSelector: '#miBuscador',
        pagination: true,    // paginación
        pageSize: 5,         // filas por página
        pageList: [5, 10, 20, 50] // opciones de filas por página
      });
    });
  </script>
            </body>
            </html>