点击更多button显示更多数据的功能实现思路代码

 此功能是根据自己思路去慢慢做出来的,做的不够专业,希望有懂这个的前辈给自己指点指点。

 //分界线————————————————————————————————————————————————————————————————
var pageIndex = 0; //页面索引初始值
var pageSize = 4; //每页显示条数初始化,修改显示条数,修改这里即可
var pageCount; //总数据量
var page1;  //页数
var page = 0;  //页数
var lingtou;  //余数 (剩余不足一页数据的数据量)
$(document).ready(function() {
layer.config({
extend : [ 'skin/moon/style.css' ], //加载新皮肤
skin : 'layer-ext-moon' //一旦设定,所有弹层风格都采用此主题。
});
getdata(pageIndex); function getdata(pageIndex) {
var shu;
var j = location.href;
var idd=j.substring(j.indexOf("=")+1,j.length);
var celue=1;
var idvice=$("#celuea").val(); if (idd==1) {
idvice=idd;
}
celue=idvice;
$.ajax({
type : "post",
cache:false,
url : "../../ZdcjCelue/findAllCelue.do",  //指向后台
dataType:"json",
data : {
'celue':celue,
msg : "最新策略",
pageIndex : (pageIndex + 1),
pageSize : pageSize,
fxsid : 0
},
success : function(data) {
var crmHtml = "";
if (pageSize>data.length) {
pageSize=data.length;
}
if (data != "0") {
for (var i = 0; i < pageSize; i++) {
/* var sun = data[i].title;
var Exclusive = data[i].Exclusive;//好像没有用
alert("Exclusive:"+Exclusive);
var IpareaGroup = 80;
var Loginsort = data[i].Loginsort;
alert("Loginsort:"+Loginsort);
var urlstr = "";
if (Exclusive == ">=") {
if (IpareaGroup <= Loginsort) {
urlstr = ' href="jtttnews.html?id='
+ data[i].id
+ '"';
} else {
urlstr = ' href="javascript:;" class="noqx" data-group="'
+ data[i].LoginYongHuZhu
+ '"';
} } else {
if (IpareaGroup == Loginsort) {
urlstr = ' href="jtttnews.html?id='
+ data[i].id
+ '"';
} else {
urlstr = ' href="javascript:;" class="noqx" data-group="'
+ data[i].LoginYongHuZhu
+ '"';
} } */
pageCount=data.length;
/* var strimages = "";
if (data[i].images == "") {
strimages = "image/zanwutupian.jpg";
} else {
strimages = data[i].images;
} */
page1 = pageCount / pageSize;
if (page1<=1) {
page1=0;
}
if (page1>page) {
page = page1;
}
shu=pageSize - data.length;  
lingtou=data.length - pageSize;
if (shu <= 4) {// 乱死了,自己琢磨吧
crmHtml += "<div class='col-md-6 col-sm-6 col-xs-12'><div class='panel panel-default'><div class='panel-body row'><div class='col-md-4 '><h3 data-original-title='Elle' class='text-center linkbutton' title=''>";
crmHtml += "<a href='jtttnews.html?id="+data[i].id+"'> <img class='img-responsive' src='http://121.41.57.4/images"+data[i].coverImg+"'></a></h3></div><div class='col-md-8'><h4 class='text-success'><a href='jtttnews.html?id="+data[i].id+"'><span class='red'>["+data[i].author+"]</span>"+data[i].title+"</a></h4>";
crmHtml += "<h5 class='text-danger'><span class='glyphicon glyphicon-time'></span><span class='liveclasscountdown'><a href='jtttnews.html?id=252'>"+data[i].timeStr+"</a></span></h5><p style='height:60px;overflow:hidden;'><a href='jtttnews.html?id="+data[i].id+"'><p style='text-overflow: ellipsis;white-space: nowrap;overflow: hidden;width:350px;height:45px;'> "+data[i].centerStr+" &nbsp; &nbsp; &nbsp;... </p></a><a href='jtttnews.html?id="+data[i].id+"'>查看全文</a></p></div></div>";
crmHtml += "<div class='panel-footer'><div class='pull-left'></div><div class='pull-right'><a data-original-title='次数' class='btn btn-default btn-sm linkbutton' role='button' href='jtttnews.html?id="+data[i].id+"' data-toggle='tooltip' title=''><span class='glyphicon glyphicon-eye-open'></span>&nbsp;"+data[i].pvcount+"</a>";
crmHtml += "<a class='btn disabled' title='详细'><span class='glyphicon glyphicon-th-list'></span></a><a href='jtttnews.html?id="+data[i].id+"'> 详细</a></div><div class='clearfix'></div></div></div></div>";
}else{
layer.alert("暂无更多");
}
}
} else {
crmHtml += '<div class="col-md-12 col-sm-12 col-xs-12">';
crmHtml += '<div class="panel panel-default">';
crmHtml += '<div class="panel-body row">';
crmHtml += ' <div class="col-md-12 center">暂无文章</div>';
crmHtml += '</div>';
crmHtml += '</div>';
crmHtml += '</div>';
}
$(".newlist").html(crmHtml);
$(".noqx").click(
function() {
var datazhu = $(this).attr("data-group");
layer.alert("对不起,该文章浏览权限:"+ datazhu,{icon : 5});
});
},
error : function() {
}
}); }
$("#showmore").click(function() {
pageIndex = pageIndex + 1;
//如果总页数大于或者等于当前页数,则提示没有更多
if (page >= pageIndex) {
if (lingtou>=4) {  //如果余数大于一页显示的数量,则加上一页显示的条数 4
pageSize = pageSize+4;
}else {
pageSize = pageSize+lingtou;  //否则加上不足一页的数据条数
}
getdata(pageIndex);  //调用上面方法
} else {
layer.alert("没有更多!", {
icon : 5
});
}
});
});
上一篇:配置Spark


下一篇:angularJs实现信息数据提交功能