点击更多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
 });
 }
 });
 });