1. 首頁
  2. 問答
  3. jQuery無限滾動在桌子上？

jQuery無限滾動在桌子上？

2012-07-27 51 views
7

是否有人知道一個很好的教程，或者我可以使用jQuery插件添加無限滾動到我的表上？jQuery無限滾動在桌子上？

我基本上想要在用戶向下滾動頁面時向表中添加更多行。

在此先感謝。

來源

2012-07-27 thatuxguy

回答

5

剛剛嘗試了這一點：

HTML：

<div id="postswrapper"> 
     <div class="item">content</div> 
     ... 
     <div id="loadmoreajaxloader" style="display:none;"><center><img src="ajax-loader.gif" /></center></div> 
    </div>

的Javascript：

<script type="text/javascript"> 
$(window).scroll(function() 
{ 
    if($(window).scrollTop() == $(document).height() - $(window).height()) 
    { 
     $('div#loadmoreajaxloader').show(); 
     $.ajax({ 
     url: "loadmore.php", 
     success: function(html) 
     { 
      if(html) 
      { 
       $("#postswrapper").append(html); 
       $('div#loadmoreajaxloader').hide(); 
      }else 
      { 
       $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>'); 
      } 
     } 
     }); 
    } 
}); 
</script>

來源

2012-07-27 13:08:57 GOK

+0

應該提到我使用.NET哈哈:)謝謝 – thatuxguy 2012-07-27 13:32:54

4

它是否適合你的需求，你可以看看這個：http://datatables.net/examples/basic_init/scroll_y_infinite.html

即使你不熟悉的數據表，它可能陰謀你使用它，爲實現在桌子上這個無限滾動你只需要添加此jQuery代碼：

$(document).ready(function() { 
    $('#example').dataTable({ 
    "bScrollInfinite": true, 
    "bScrollCollapse": true, 
    "sScrollY": "200px" 
    }); 
});

到HTML中填充表（他們有4 ways這樣做）。

Anyay，IMO，值得一看。

編輯：作爲@ SpoiledTechie.com說下面的評論 - 這是信息過時，你應該看看他們的方式支持，現在：http://datatables.net/upgrade/1.10#bScrollInfinite

來源

2012-07-27 13:05:29 Nikola

+0

看起來好，沒有想在表格中添加scoll bar，主要是使用瀏覽器窗口上的那個，好像FB使用我認爲 – thatuxguy 2012-07-27 13:30:44

+0

在那種情況下，我認爲這可能不適合你。我想你想要這樣的東西，因爲你已經把「桌子」放在你的標題中。 – Nikola 2012-07-27 13:47:50

+0

確實看起來不錯，但未來可能會使用它。所以感謝指導我:) – thatuxguy 2012-07-27 15:09:00

相關問題

 相關問題