原先的页面如下：
要实现的效果图：
要实现的效果，就是点击“查看更多”按钮，动态加载五条数据。而点击“查看所有”时数据全部加载。
主要的思路：
1、点击按钮，发生点击事件。
2、执行AJAX。若成功，返回数据进行遍历。
3、写样式，追加到原先表格的后面。
部分代码如下：
查看更多：
$(function() {
$(".lookup1").children(".show_more").click(function() {//点击查看更多按钮，发生点击事件
var page = $(this).data("page") + 1 ;//之前给按钮添加data-page属性，在这里获取
var that = $(this);
$.ajax({
type: "GET",
url: "index.php?c=analyse&a=showMore&customer_id=" + customer_id,
data: "page=" + page,
success: function(results){
var obj = $.parseJSON(results);//将返回的数据转化为json对象
var html = '';//初始化，置空
$.each(obj, function(index, item) {//遍历对象
html += '
';
html += '
' + item['content'] + '';
html += '
' + item['date_added'] + '';
html += '
' + item['user_name'] + '';
html += '
';
});//
that.parent(".lookup1").siblings(".preview_table7").find("tr:last").after(html); //追加内容
that.data("page", page + 1);//页数加1
}
});
})
})
查看所有，与查看更多同理，只是调用的方法不一样而已。这里就不列出代码了。
转载时请注明出处及相应链接，本文永久地址：/5466.html
微信打赏
支付宝打赏
感谢您对作者Eva的打赏，我们会更加努力！如果您想成为作者，请点我
