在ajax调用之后的JQuery for循环

时间:2012-04-26 09:31:22

标签: jquery ajax image for-loop jquery-pagination

我正在尝试循环ajax调用成功后返回的数据并将结果添加到pagination plugin.

这是我的代码:

 var imagesPerPage = 2, pageNumber = 1;
  var pagesContainer = $('#pagesContainer'),
  imagesInPage = 0,
  divPage = $("#p1");

    $.ajax({
           type: "POST",
           url: "Default.aspx/GetImages",
           data:{},
           contentType: "application/json; charset=utf-8",
           dataType: "json",
           success: function (response) {

             //Here goes my for loop                    

           }
      });

这是我的for循环,我需要从webmethod获取图像并循环它们并添加到分页。

 for (i = 0; i < response.d.length; i++) {
          if (imagesInPage >= imagesPerPage) {
          imagesInPage = 1;
          pageNumber += 1;
          divPage = $('<div/>', { id: "p" + pageNumber }).addClass('pagedemo').hide().appendTo(pagesContainer);
          } else {
          imagesInPage += 1;
          }
}

这是我的分页默认配置:

 $("#pagination").paginate({
              count: pageNumber,
              start: 1,
              display: Math.min(7, pageNumber),
              border: true,
              border_color: '#fff',
              text_color: '#fff',
              background_color: 'black',
              border_hover_color: '#ccc',
              text_hover_color: '#000',
              background_hover_color: '#fff',
              images: false,
              mouse: 'press',
              onChange: function (page) {
              $('#paginationdemo ._current').removeClass('_current').hide();
              $('#p' + page).addClass('_current').show();
        }
  }); //pagination

现在我的问题是,当我尝试获取一个图像的响应时,它没有向我显示图像以及分页。如果它不止一个,那么它开始向我显示分页和图像。

截图

enter image description here

所以有人能说我哪里出错了?

2 个答案:

答案 0 :(得分:0)

你想在哪里获得一张图片的回复?如果您尝试在if条件下执行此操作,则仅对一个响应不起作用,因为

imagesInPage&gt; = imagesPerPage

评估为false,因为imagesPerPage = 2且imagesInPage = 0;

如果您的回复类型是json并且这不能解决您的问题,请尝试使用

$.each(response,function(index,data){
    //check each image here 
      // data.id gives you the id of each json object in the response
})

答案 1 :(得分:0)

这是你最近遇到同样问题的分页问题。要解决此问题,您需要一个条件。检查响应的长度。如果它是1然后添加一些默认值,这将有效。