Catalogo ventas Servlets-Ajax-DOM

[JusticeArm]

Buenas tardes de ante mano muchas gracias por su colaboraciòn, tengo un pequeño problema que no logro resolver y no se me ocurre alguna idea que me funcione

Estoy trayendo toda la informacion de la tabla productos por un DAO, que envia un Array<VO> al CONTROLADOR de hay al Servlet y el Servlet al AJAX lo que hago es mostrar los primeros 9 productos con su respectiva informaciòn osea que cuando entro a la pagina comprar-productos inicio la funcion:

Código:

<script type="text/javascript">
    $(document).ready(function () {
        listarProductos.iniciar();
    })

</script>

hasta hay bien pero la pregunta es =), como implemento un boton que me liste los siguientes 9 productos, muchas gracias por su atenciòn y agradezco su colaboracion.

Codigo para listar productos:

Código:

var listarProductos = {
    iniciar: function (contadorG) {

        $.ajax({
            url: 'productos',
            data: {},
            method: "POST",
            dataType: 'json',
            success: function (datos) {
                console.log(datos);


                var isecuD = new Array($('#secuD1'), $('#secuD2'), $('#secuD3'), $('#secuD4'), $('#secuD5'), $('#secuD6'), $('#secuD7'), $('#secuD8'), $('#secuD9'));
                var imgPosi = new Array($('#imgPro1'), $('#imgPro2'), $('#imgPro3'), $('#imgPro4'), $('#imgPro5'), $('#imgPro6'), $('#imgPro7'), $('#imgPro8'), $('#imgPro9'));
                var nombrePosi = new Array($('#nombrePro1'), $('#nombrePro2'), $('#nombrePro3'), $('#nombrePro4'), $('#nombrePro5'), $('#nombrePro6'), $('#nombrePro7'), $('#nombrePro8'), $('#nombrePro9'));
                var precioPosi = new Array($('#precioU1'), $('#precioU2'), $('#precioU3'), $('#precioU4'), $('#precioU5'), $('#precioU6'), $('#precioU7'), $('#precioU8'), $('#precioU9'));
                var toProductoPosi = $('#rta-tiProduc');
                var marcaPosi = $('#rta-marca');
                var referenciaPosi = $('#rta-referencia');
                var capacidadPosi = $('#rta-capacidad');
                var descripcionPosi = $('#rta-descripcion');
                var estadoPosi = $('#rta-estado');
                var contN = new Array();
                var contValorU = new Array();
                var contProcod = new Array();
                var contTipoPro = new Array();
                var contDescripcion = new Array();
                var contReferencia = new Array();
                var contMarca = new Array();
                var contCapacidad = new Array();
                var contEstado = new Array();
                var contadorGlobal = 9;
                var countArray = 0;
                var contImg = new Array();
                var idProducto = new Array();
                if (contadorG != 0 || contadorG != null) {
                    countArray += contadorG;
                }

                $.each(datos, function (i, nomArr) {
                    contN[i] = nomArr.nombre;
                    contValorU[i] = nomArr.valorUnitario;
                    contProcod[i] = nomArr.idProducto;
                    contTipoPro[i] = nomArr.nombreTproducto;
                    contDescripcion[i] = nomArr.descripcion;
                    contReferencia[i] = nomArr.referencia;
                    contMarca[i] = nomArr.marca;
                    contCapacidad[i] = nomArr.capacidad;
                    contEstado[i] = nomArr.estado;
                    contImg[i] = nomArr.foto;
                    idProducto[i] = nomArr.idProducto;
                    if (i <= contadorGlobal) {

                        //Mostrar imagen, nombre, precio.
                        nombrePosi[i].html(contN[(countArray)]);
                        precioPosi[i].html(contValorU[(countArray)]);
                        nombrePosi[i].val(contProcod[(countArray)]);
                        imgPosi[i].attr('src', contImg[countArray]);                        
                        countArray++;
                        isecuD[i].html(idProducto[i]);
                    }

                });


            },
            error: function (error) {
                console.log(error);
                alert('ERROR' + error.responseText);

            }
        });
    },
}