[英]Jquery tabs with load more button
嗨,是否有php ajax選項卡的參考/示例,每個選項卡中都加載了更多功能? 可以說我們有2個標簽,當我們單擊每個標簽時,它將僅顯示選定數量的結果,直到我們在每個結果末尾單擊“加載更多”按鈕。 謝謝。 我當前的代碼似乎運行不佳,當我單擊每個選項卡時它會正確顯示結果,但是當我再次單擊這些選項卡時,它將加載更多數據。以下是我的當前代碼:
<li data-tab-id="self" class="tab selected"><a href="#">Near You</a><span class="unread-count hidden" style="display: none;"></span></li>
<li data-section-id="user_feed" data-component-bound="true">
<ul class="module-list">
<!-- USER ACTIVITY JSON -->
</ul>
<a class="ybtn ybtn-primary ybtn-large more-wishlist" href="#" onclick="getRecentActivityClick(event)">
<span data-component-bound="true" class="loading-msg user_feed">See more recent activity</span>
</a>
</li>
<script type="text/javascript">
var totalRecords = '<?= $this->totalRecords?>';
$(document).ready(function(){
getRecentActivity(totalRecords);
});
$(".hd-ui-activity li a").click(function(e) {
e.preventDefault();
var tabid = $(this).parent().attr('data-tab-id');
if(tabid == "self"){
getRecentActivity(totalRecords);
}
});
function getRecentActivityClick(event)
{
if (event != null){
disabledEventPreventDefault(event);
}
getRecentActivity(totalRecords);
}
home.js:
function getRecentActivity(totalRecords)
{
$.ajax({
url:baseUrl + "activity/activityfeed",
data:{'total':totalRecordsView},
dataType:"json",
type:"POST",
success:function(data){
var activityHtml = '<p>Hello</p>';
$('#activity-feed li[data-section-id=near_you] .module-list').append(activityHtml);
}
});
}
更新:JSFIDDLE: http : //jsfiddle.net/zlippr/5YkWw/1/
我從您的問題中了解的..我認為您正在獲取更多數據,因為您正在使用append()
..使用html()
append()將參數指定的內容插入到匹配元素集中每個元素的末尾。
html()用於設置元素的內容,該元素中的所有內容都將被新內容完全替換。
嘗試這個
更換
$('#activity-feed li[data-section-id=near_you] .module-list').append(activityHtml);
與
$('#activity-feed li[data-section-id=near_you] .module-list').html(activityHtml); //html()
你可以這樣做:
$('#activity-feed li[data-section-id=near_you] .module-list').append(activityHtml);
// here you are appending the fulldata just apply some css here
以這種方式使用css:
$('#activity-feed li[data-section-id=near_you] .module-list')
.css({'height':'300px','overflow':'hidden'})
.append(activityHtml);
然后單擊loadmore:
$('your load more button').toggle(function(){
$('#activity-feed li[data-section-id=near_you] .module-list')
.css({'height':'auto','overflow':'auto'})
},function(){
$('#activity-feed li[data-section-id=near_you] .module-list')
.css({'height':'300px','overflow':'hidden'});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.