点击更多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+" ... </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> "+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
});
}
});
});
点击更多button显示更多数据的功能实现思路代码的更多相关文章
- discuz论坛apache日志hadoop大数据分析项目:清洗数据核心功能解说及代码实现
discuz论坛apache日志hadoop大数据分析项目:清洗数据核心功能解说及代码实现http://www.aboutyun.com/thread-8637-1-1.html(出处: about云 ...
- 全国天气预报信息数据 API 功能简介与代码调用实战视频
此文章对开放数据接口 API 之「全国天气预报信息数据 API」进行了功能介绍.使用场景介绍以及调用方法的说明,供用户在使用数据接口时参考之用,并对实战开发进行了视频演示. 1. 产品功能 接口开放了 ...
- UITableView加载显示更多内容
#import <UIKit/UIKit.h> @interface ViewController : UIViewController @end #import "ViewCo ...
- 【代码笔记】iOS-点击城市中的tableView跳转到旅游景点的tableView,下面会有“显示”更多。
一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController ...
- js点击更多显示更多内容效果
我写了一个简单的分段显示插件,用法很简单:1,把你要分面显示的内容的容器元素增加一个class=showMoreNChildren,并增加一个自定义属性pagesize="8" 这 ...
- jquery 点击显示更多
点击显示更多 html <div class="servicepicture banxin"> <div class="imgcontent" ...
- 【Excle数据透视】如何在数据透视表字段列表中显示更多的字段
创建完数据透视表之后,由于字段太多,在列表中没有完全显示 解决方案 通过"字段节和区域节并排"功能来显示更多字段 修改后结果 字段已经完全显示出来了! "字段节和区域节层 ...
- Android_(控件)使用AlertDialog实现点击Button显示出多选框
单击"更多"按钮,显示出多选框 运行截图: 程序结构 (本想通过Button中android:background使用drawable资源下的图片作为按钮背景,设计太丑就去掉了Σ( ...
- Android编程之仿微信显示更多文字的View
微信朋友圈中,如果好友发表的文字过长,会自动收缩起来,底下有提示,当点击“显示更多”时才会展开. 首先定义布局文件(很简单,不解释): <?xml version="1.0" ...
随机推荐
- ZYNQ学习之——MIO
1.GPIO基础知识 Zynq7000 系列芯片有 54 个 MIO(multiuse I/O) ,它们分配在 GPIO 的 Bank0 和Bank1 隶属于 PS 部分, 这些 IO 与 PS 直接 ...
- 对想进入Unity开发新人的一些建议
提前声明:本文只是写给那些非职业游戏开发人士,只面向那些在校本科生,或已就业但无unity背景的同学们,当然是面对程序员方向的.本人刚工作也没多久,资历尚浅,之前在网上有一位同学让我谈谈一些想法,所以 ...
- OpenGL学习笔记1——第一个程序
学习的参考书基本是按照GL编程指南,如果有消息机制概念,对于GLUT的理解是很自然的.下面就按照自己写的第一个程序详细解释一下GL,还是比较容易上手的. 程序实现的功能是,根据当前随即种子摇出来的结果 ...
- Gesture Recognizers与触摸事件分发[转]
一.Gesture Recognizers Gesture Recognizers是在iOS3.2引入的,可以用来识别手势.简化定制视图事件处理的对象.Gesture Recognizers的基类为U ...
- jquery 获取鼠标和元素的坐标点
获取当前鼠标相对img元素的坐标 $('img').mousemove(function(e) { varpositionX=e.pageX-$(this).offset().left; //获取当前 ...
- webstorm编辑RN代码提示功能
需要下载一个文件. 1. 进入你想存储这个文件的目录,按住shift+鼠标右键,选择“在此处打开命令窗口” 2. 在命令窗口中输入 git clone https://github.com/virt ...
- php获取当月天数及当月第一天及最后一天、上月第一天及最后一天实现方法
1.获取上个月第一天及最后一天. echo date('Y-m-01', strtotime('-1 month')); echo "<br/>"; ...
- js中array的filter用法
function bouncer(arr) { // Don't show a false ID to this bouncer. arr = arr.filter(function(val) { i ...
- Python自动化 【第十八篇】:JavaScript 正则表达式及Django初识
本节内容 JavaScript 正则表达式 Django初识 正则表达式 1.定义正则表达式 /.../ 用于定义正则表达式 /.../g 表示全局匹配 /.../i 表示不区分大小写 /.../m ...
- python--day2--基础数据类型与变量
笔者:QQ: 360212316 python控制语句 for循环语句示例: for i in range(10): print(i) for循环语句示例1: for i in range(10) ...