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

Posted 2020-08-03 根目录97

  1   2   3 
  4 此功能是根据自己思路去慢慢做出来的，做的不够专业，希望有懂这个的前辈给自己指点指点。
  5 
  6 //分界线————————————————————————————————————————————————————————————————
  7 var pageIndex = 0; //页面索引初始值
  8 var pageSize = 4; //每页显示条数初始化，修改显示条数，修改这里即可
  9 var pageCount; //总数据量
 10 var page1;　　//页数
 11 var page = 0;　　//页数
 12 var lingtou;　　//余数 （剩余不足一页数据的数据量）
 13 $(document).ready(function() {
 14 layer.config({
 15 extend : [ ‘skin/moon/style.css‘ ], //加载新皮肤
 16 skin : ‘layer-ext-moon‘ //一旦设定，所有弹层风格都采用此主题。
 17 });
 18 getdata(pageIndex);
 19 
 20 function getdata(pageIndex) {
 21 var shu;
 22 var j = location.href;
 23 var idd=j.substring(j.indexOf("=")+1,j.length);
 24 var celue=1;
 25 var idvice=$("#celuea").val();
 26 
 27 if (idd==1) {
 28 idvice=idd;
 29 }    
 30 celue=idvice;
 31 $.ajax({
 32 type : "post",
 33 cache:false,
 34 url : "../../ZdcjCelue/findAllCelue.do",　　//指向后台
 35 dataType:"json",
 36 data : {
 37 ‘celue‘:celue,
 38 msg : "最新策略",
 39 pageIndex : (pageIndex + 1),
 40 pageSize : pageSize,
 41 fxsid : 0
 42 },
 43 success : function(data) {
 44 var crmhtml = "";
 45 if (pageSize>data.length) {
 46 pageSize=data.length;
 47 }
 48 if (data != "0") {
 49 for (var i = 0; i < pageSize; i++) {
 50 /* var sun = data[i].title;
 51 var Exclusive = data[i].Exclusive;//好像没有用
 52 alert("Exclusive:"+Exclusive);
 53 var IpareaGroup = 80;
 54 var Loginsort = data[i].Loginsort;
 55 alert("Loginsort："+Loginsort);    
 56 var urlstr = "";
 57 if (Exclusive == ">=") {
 58 if (IpareaGroup <= Loginsort) {
 59 urlstr = ‘ href="jtttnews.html?id=‘
 60 + data[i].id
 61 + ‘"‘;
 62 } else {
 63 urlstr = ‘ href="javascript:;" class="noqx" data-group="‘
 64 + data[i].LoginYongHuZhu
 65 + ‘"‘;
 66 }
 67 
 68 } else {
 69 if (IpareaGroup == Loginsort) {
 70 urlstr = ‘ href="jtttnews.html?id=‘
 71 + data[i].id
 72 + ‘"‘;
 73 } else {
 74 urlstr = ‘ href="javascript:;" class="noqx" data-group="‘
 75 + data[i].LoginYongHuZhu
 76 + ‘"‘;
 77 }
 78 
 79 } */
 80 pageCount=data.length;
 81 /* var strimages = "";
 82 if (data[i].images == "") {
 83 strimages = "image/zanwutupian.jpg";
 84 } else {
 85 strimages = data[i].images;
 86 } */    
 87 page1 = pageCount / pageSize;
 88 if (page1<=1) {
 89 page1=0;
 90 }
 91 if (page1>page) {
 92 page = page1;
 93 }
 94 shu=pageSize - data.length;　　
 95 lingtou=data.length - pageSize;
 96 if (shu <= 4) {// 乱死了，自己琢磨吧
 97 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=‘‘>";
 98 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>";
 99 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>";
100 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>";
101 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>";
102 }else{
103 layer.alert("暂无更多");
104 }
105 }
106 } else {
107 crmHtml += ‘<div class="col-md-12 col-sm-12 col-xs-12">‘;
108 crmHtml += ‘<div class="panel panel-default">‘;
109 crmHtml += ‘<div class="panel-body row">‘;
110 crmHtml += ‘ <div class="col-md-12 center">暂无文章</div>‘;
111 crmHtml += ‘</div>‘;
112 crmHtml += ‘</div>‘;
113 crmHtml += ‘</div>‘;
114 }
115 $(".newlist").html(crmHtml);
116 $(".noqx").click(
117 function() {
118 var datazhu = $(this).attr("data-group");
119 layer.alert("对不起，该文章浏览权限："+ datazhu,{icon : 5});
120 });
121 },
122 error : function() {
123 }
124 });
125 
126 }
127 $("#showmore").click(function() {
128 pageIndex = pageIndex + 1;
129 //如果总页数大于或者等于当前页数，则提示没有更多
130 if (page >= pageIndex) {
131 if (lingtou>=4) {　　//如果余数大于一页显示的数量，则加上一页显示的条数 4
132 pageSize = pageSize+4;
133 }else {
134 pageSize = pageSize+lingtou;　　//否则加上不足一页的数据条数
135 }
136 getdata(pageIndex);　　//调用上面方法
137 } else {
138 layer.alert("没有更多！", {
139 icon : 5
140 });
141 }
142 });
143 });