Bootstrap Progress Bar en consulta mysql

[osbragon]

Hola a todos.

Tengo una consulta SELECT que selecciona una gran numero de registros y me gustaria implementar una barra de progreso con Bootstrap Progress Bar, mientras se realizan las tareas del while

Código PHP:

  $result = mssql_query($query);
while($row = mssql_fetch_array($result)){
.... mostrar la barra de progreso 
} 
   

Como no encuentro ningún tutorial, he probado a variar los valores de la barra .. pero no me funciona

Código PHP:

  <div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 50%"><span class="sr-only">0% Completo</span>
</div>
</div> 
   

¿alguna ayuda?

[pateketrueke]

Estás tratando de resolver cosas fuera de lugar: no puedes mostrar una barra de progreso en HTML mientras construyes el HTML, es decir, primero debe el navegador recibir el HTML para comenzar a mostrarlo pero PHP se ejecuta en el servidor así que sencillamente no se puede.

Primero PHP terminará su proceso y entonces después recibirás el HTML, lo cual no tiene sentido en el tiempo y espacio.

Tendrás que resolverlo usando Javascript, es lo único que se me ocurre.

[xfxstudios]

Como ya te indicaron, debes engañar al sistema con javascript, ya que cuando tu html se ha cargado, el php lo ha hecho hace rato, podrias utilizar ajar y un par de funciones para simular la carga de los datos, pero en realidad estos ya estan cargados, solo que esperas a emitir la respuesta en la lista utilizando el sleep de php, por ejemplo:

el PHP de muestra:

Código PHP:

if($_GET['id']==1){
 
$ca = '';
 
for($i=0; $i<=10; $i++){
 
    $ca = $i;
    
 
}
 
echo "Esta es la Respuesta de PHP";
sleep(10);
}
 

Nuestro HTMl de Muestra:

Código HTML:

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <button type="button" class="btn btn-primary" onClick="lista()">button</button>
</div>
 
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    
    <div class="progress">
        <div class="progress-bar progress-bar-striped" style="width: 0%">
            <span class="etiqueta"></span>
        </div>
    </div>
    <div id="respuesta"></div>
 
</div>
 

y nuestro script js:

Código Javascript:

var contador = 0;
  var fin = 10;
 
    function lista(){
 
        var id = setInterval("cuenta()",1000);
 
        $.ajax({
            url:     'directorio/controllers/muestra.php?id=1',
            type:     'get',
 
            success: function(data){
 
                clearInterval(id);
                $("#respuesta").html(data);
                
            }
        })
 
    }
    
    function cuenta(){
 
        contador = contador + 10;
        $(".progress-bar").css('width',contador+"%");
        $(".etiqueta").html(contador+"% Completado");
 
    }
 

de esta manera simulamos que se estan cargando los datos consultados, cuando en realidad lo que estamos es igualando la espera de nuestro sleep php con el contador, que a su vez acrecenta la barra.

Saludos

[xfxstudios]

Tambien podrias canvia la suma del contador de 10 a 1 y bajar los milisegundos desetInterval a 100

[Eleazan]

Iniciado por pateketrueke

Estás tratando de resolver cosas fuera de lugar: no puedes mostrar una barra de progreso en HTML mientras construyes el HTML, es decir, primero debe el navegador recibir el HTML para comenzar a mostrarlo pero PHP se ejecuta en el servidor así que sencillamente no se puede.

Primero PHP terminará su proceso y entonces después recibirás el HTML, lo cual no tiene sentido en el tiempo y espacio.

Tendrás que resolverlo usando Javascript, es lo único que se me ocurre.

No es del todo cierto...

Siempre está flush y ob_flush, que permiten volcar el resultado de php antes de que termine el script...

Pero si pienso que es mejor usando AJAX ;)

[osbragon]

Muchas gracias a todos por vuestros comentarios y posibles soluciones.
Probaré lo que me habéis indicado y os diré el resultado.
Un saludo a todos.