Listado de Objetos de BD

[siamatnekerm]

La cuestion es que mediante JSON y PHP me traigo de mi base de datos los 16 ultimos videos insertados en la base de datos, digamos que llego a obtener en un arrray de javascript la informacion que deseo ahora bien, a la hora de mostrarlos necesito hacer 16 div en javascript, pero la variable que se encarga de ir almacenando todo el div se me queda corta, para ser mas claro me gustaria hacer algo parecido a lo que hay en esta webs:

http://series.ly/scripts/

Mediante AJAX se traen las ultimas series o peliculas y lo impriminen alguien me puede guiar un poco ?

Para ser mas claro la idea es desde el HTML llamar a una funcion de javascript que me imprima los 16 videos insertados, pero ... esta es la mejor forma?

Funcion que se encarga de traerme el objeto con los 16 videos:

Código Javascript:

$.ajax({
            type: "POST",
            url: "../php-actions/get_latest_lists.php",
            async: true,
            success: function(data){
                var dataJson = eval(data);
                printLists(dataJson);
            },
            error: function (obj, error, objError){
                alert(error);
            }
        });
 

Funcion que se encarga de imprimir los 16 elementos (Pero no me esta funcionando ya que no cabe todo en la variable html)

Código Javascript:

function printLists(listsJson){
            var spans = 11;
            var html = '';
 
            for(var i = 0; i <= spans; i++){
                html = '';
                if(i == 0){
                    html += '<div class="offset2"></div>';
                }
                else if(i == 5){
                    html += '<div class="offset2"></div>';
                }
                else{
                    //var btnActions = 'btn-actions'+i;
                    html += '<li class="span2">';
                        html += '<div class="list">';
                            html += '<div class="list-img">';
                                html += '<div class="btn-actions">';
                                html += '<a href="#">';
                                html += '<img src="img/btn-play.png"/>';
                                html += '</a>';
                                html += '</div>';
                                html += '<img src="http://img.youtube.com/vi/'+listsJson[i].idVideo+'/mqdefault.jpg">';
                            html += '</div>';
                            html += '<div class="list-text-box">';
                                html += '<div class="list-text">';
                                html += '<p>'+listsJson[i].title+'</p>';
                                html += '<p>'+listsJson[i].nVideos+' videos</p>';
                                html += '</div>';
                            html += '</div>';
                        html += '</div>';
                    html += '</li>';
                }
                document.getElementById('latest-lists').innerHTML = html;
            }
        }//</printLists>
 

En mi index.php:

Código HTML:

<ul class="thumbnails" id="latest-lists">
     <script type="text/javascript">printLatestLists();</script>
</ul>