在不同的div中动态绘制图像

时间:2016-08-02 19:44:49

标签: javascript jquery html ajax

您好我有一个包含四个div的表单,每个div都是一个完整的页面,可以像这样打印:

Format Example

我使用AJAX创建所有控件没问题,然后我用另一个ajax调用加载图像,这里是成功函数:

success: function (data) {
        //Variable para convertir los datos obtenidos a JSON
        var aRC = JSON.parse(data.d);
        //Variable que se utilizara para construir la estructura HTML
        var lineas = "";
        var lineas2 = "";
        //Ciclo FOR para recorrer el arreglo
        for (var i = 0; i < aRC.length; i++) {
            //Variables = a campos obtenidos al ejecutar la funcion
            var id = aRC[i].Id;
            var num = id;
            var rev = aRC[i].FileName;
            var pur = aRC[i].Type;
            var status = aRC[i].Content;
            var imagen = status.substring(36, status.length - 37);
            var owner = aRC[i].IdAlerta;


            if (i < 4) {
                lineas += '<div class="col-lg-3 col-md-4 col-xs-3 thumb marco">';
                lineas += '<a class="thumbnail" href="#">'
                lineas += '<img class="responsive" src="data:image/jpeg;base64,' + imagen + '" />';
                lineas += '<p class="hidden text-justify" id="Pie' + i + '"></p>'
                lineas += '</a>';
                lineas += '<span class="btn btn-xs btn-success fa fa-pencil hidden-print" id="EditPie' + i + '"></span>';
                lineas += '<input type="text" class="form-control hidden hidden-print" id="PiePag' + i + '"> <span class="btn btn-xs btn-success fa fa-check hidden hidden-print" id="OkPie' + i + '"></span>'
                lineas += '</div>';
            }

            else {

                lineas2 += '<div class="col-lg-3 col-md-4 col-xs-3 thumb marco">';
                lineas2 += '<a class="thumbnail" href="#">'
                lineas2 += '<img class="responsive" src="data:image/jpeg;base64,' + imagen + '" />';
                lineas2 += '<p class="hidden text-justify" id="Pie' + i + '"></p>'
                lineas2 += '</a>';
                lineas2 += '<span class="btn btn-xs btn-success fa fa-pencil hidden-print" id="EditPie' + i + '"></span>';
                lineas2 += '<input type="text" class="form-control hidden hidden-print" id="PiePag' + i + '"> <span class="btn btn-xs btn-success fa fa-check hidden hidden-print" id="OkPie' + i + '"></span>'
                lineas2 += '</div>';
            }
        }
        $('#Imagenes').html(lineas);
        $('#Imagenes2').html(lineas2);
    }

这里的问题是我想每页只加载4张图片,我的当前代码错误但是使用少于9张图片我该如何解决?

PD。该代码仅适用于2页,但必须使用2页以上。

编辑:$ Imagenes是div(page1),$ Imagenes2是另一个div(page2)。

1 个答案:

答案 0 :(得分:0)

继续使用这样的“IF”:

if (i < 4) {
   code for $('#Imagenes')
}
else {
   if (i < 8) {
      code for $('#Imagenes2')           
   }
   else {
         if (i < 12) { 
              code for $('#Imagenes3')          
         }
   }
}

继续使用你想要的所有#Imagenes。