使用Jquery的基本分頁問題

我想在我的網站上使用Jquery進行基本的分頁。（代碼如下）。一切都工作得很好，但我注意到它加載了查詢的所有結果，然後使用'切片'功能對其進行分片。這基本上只是在後臺隱藏額外的結果。我不想加載所有結果，我只想加載它們中的4個，當用戶單擊下一個或第二個數字時，我想加載下一個4結果，而不是同時加載它們，只是切片他們了。使用Jquery的基本分頁問題

$(document).ready(function(){ 
      //Problem about this is that it loads all the images and just slice them up. 

      //Declaring variables 
      var page = 1; 
      var per_page = 4; 
      var items = $('.row').length; 
      var page_last = Math.ceil(items/per_page); 

      //Set Page 
      function setPage(page){ 
       $('.row').slice(0, page * per_page).hide(); 
       $('.row').slice(page * per_page - per_page, page * per_page).show(); 
       $('.row').slice(page * per_page).hide(); 

      } 

      //Next Button 
      $('.next').click(function(){ 
       if(page < page_last){ 
        $('.links.link_' + page).attr('href', '#').css('color', 'white'); 
        page++; 
        $('.links.link_' + page).removeAttr('href').css('color', 'gray'); 
        setPage(page); 
       } 
      }); 

      //Previous Button 
      $('.prev').click(function(){ 
       if(page > 1){ 
        $('.links.link_' + page).attr('href', '#').css('color', 'white'); 
        page--; 
        $('.links.link_' + page).removeAttr('href').css('color', 'gray'); 
        setPage(page); 
       } 
      }); 

      //Generate Page Links 
      for(x = 1; x <= page_last; x++){ 
       if(x == 1){ 
        $('.pages').append(' <a style="color:gray" class="links link_' + x + '">' + x + '</a>'); 

       }else{ 
        $('.pages').append(' <a href="#" class="links link_' + x + '">' + x + '</a>'); 
       } 
      } 
      //Links Functions 

      $('.links').click(function(){ 
       $('.links.link_' + page).attr('href', '#').css('color', 'white'); 
       page = $(this).html(); 
       $('.links.link_' + page).removeAttr('href').css('color', 'gray'); 
       setPage(page); 
      }); 


      $('.next, .prev').click(function(event){ 
       event.preventDefault(); 
      }); 

      setPage(1); 
});

來源

2013-03-29 kuwame

如果查詢結果很大，該怎麼辦？它會非常緩慢地加載數據。在用戶點擊下一個或第二個數字時，如何使用ajax加載數據？

來源

2013-03-29 05:57:39 HaleDeng

這就是我正在做的。你沒看到我的代碼嗎？ – kuwame

您只需加載所有結果並使用'切片'功能來隱藏部分結果。你不是那個意思嗎？ – HaleDeng

使用Jquery的基本分頁問題

回答

相關問題