jquery 点击加载更多
html部分
<ul class="bill moreadd">
<div class="total"><span>-</span><span>23756.177</span></div>
<li>
<div class="left">
<p class="type">0.01000</p><p class="time">2019-06-14 15:58:59</p>
</div>
<div class="right">签到成功</div></li><li>
<div class="left"><p class="type">0.01000</p><p class="time">2019-06-14 15:58:59</p>
</div>
<div class="right">签到成功</div></li><li><div class="left"><p class="type">0.01000</p><p class="time">2019-06-14 15:58:59</p></div><div class="right">签到成功</div>
</li>
<li>
<div class="left">
<p class="type">0.01000</p>
<p class="time">2019-06-14 15:58:59</p>
</div>
<div class="right">签到成功</div>
</li>
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span> <span class=“more” data-total=“3” data-page=“1”>加载更多</span>
$('.more').on('click', function () {
var baseurl = $('#baseurl').val();
var type = $.trim($(this).attr('data-type'));
var total = parseInt($(this).attr('data-total'));
var page = parseInt($(this).attr('data-page'));
$.ajax({
url: './lib/js/more' + page + '.json',
type: 'get',
dataType: "json",
data: { page: page + 1 },
success: function (res) {
var result = '';
// console.log(res.lists)
var list = res.lists
$('.more').attr('data-page', page + 1);
for (var i = 1; i < list.length; i++) {
console.log(res.lists[i])
result += '<li>'
+ '<div class="left">'
+ '<p class="type">' + res.lists[i].price + '</p>'
+ '<p class="time">' + res.lists[i].date + '</p>'
+ '</div>'
+ '<div class="right">' + res.lists[i].name + '</div>'
+ '</li>'
}
$('.moreadd').append(result);
<span class="hljs-keyword">if</span> (page + <span class="hljs-number">1</span> == total) {
$(<span class="hljs-string">'.more'</span>).remove();
}
}
});
});
注意
这里的more.json 是本地测试数据,所以传入页码是 more1.json more2.json 换成接口的话,按照正常来就可以了。
jquery 点击加载更多的更多相关文章
- Jquery点击加载更多
一.点击加载更多有点像分页获取数据类似,下面是本人写的一个简单的小例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
- jQuery+php+Ajax文章列表点击加载更多功能
jQuery+php+Ajax实现的一个简单实用的文章列表点击加载更多功能,点击加载更多按钮,文章列表加载更多数据,加载中有loading动画效果. js部分: <script type=&qu ...
- PHP+Ajax点击加载更多列表数据实例
一款简单实用的PHP+Ajax点击加载更多列表数据实例,实现原理:通过“更多”按钮向服务端发送Ajax请求,PHP根据分页参数查询将最新的几条记录,数据以JSON形式返回,前台Query解析JSON数 ...
- PHP+Ajax点击加载更多内容 -这个效果好,速度快,只能点击更多加载,不能滚动自动加载
这个效果好,速度快,只能点击更多加载,不能滚动自动加载 一.HTML部分 <div id="more"> <div class="single_item ...
- JS实现点击加载更多效果
适用场景:后端直接把所有的文章都给你调出来了,但是领导又让做点击加载更多效果...(宝宝心里苦啊) 点击加载更多效果: 第一个和第二个参数分别是btn和ul的DOM(必填) ...
- 基于jQuery点击加载动画按钮特效
分享一款基于jQuery点击加载动画按钮特效.这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- tableView中的“点击加载更多”点击不到
假设当前的tableView是_tableView,则可以这样设置 _tableView.contentInset = UIEdgeInsetsMake(0, 0, 100, 0); 该属性用于设置当 ...
- android ListView的上部下拉刷新下部点击加载更多具体实现及拓展
android ListView的上部下拉刷新下部点击加载更多具体实现及拓展 ListView下拉刷新,上拉自动加载更多 下拉刷新以及加载更多
- ajax点击加载更多数据图片(预加载)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- java 如何实现大文件上传下载(传输)各种格式
我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用. 首先我们需要了解的是上传文件三要素: 1.表单提交方式:post (get方式提交有大小 ...
- 【bzoj2821】作诗(Poetize)
*题目描述: 神犇SJY虐完HEOI之后给傻×LYD出了一题:SHY是T国的公主,平时的一大爱好是作诗.由于时间紧迫,SHY作完诗 之后还要虐OI,于是SHY找来一篇长度为N的文章,阅读M次,每次只阅 ...
- warp(图像仿射变换)
仿射变换是一种二维坐标(x,y)到二维坐标(u,v)的线性变换. 对应的齐次坐标矩阵表示形式为: 仿射变换特点: 直线经仿射变换后依然为直线: ’直线之间的相对位置关系保持不变,平行线经仿射变换后依然 ...
- Android检测WIFI连接、提示框延时消失
Android检测系统WIFI是否连接?如没有连接,显示提示框,提示进行设置,当点击设置进入系统WIFI界面后1秒钟,提示框自动消失. 代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 ...
- rman备份/恢复
全备脚本 cat rman_full.sh #!/bin/bash export ORACLE_BASE=/opt/oracle export ORACLE_HOME=$ORACLE_BASE/pro ...
- CRTMPServer 在CentOS 64-bit下的编译(转)
CRTMPServer 在CentOS 64-bit下的编译 http://blog.csdn.net/qiuchangyong/article/details/52848942 ========== ...
- node.js安装和配置(windows系统)
node.js安装和配置(windows系统) node javasript vscode node是javascript的管理工具,所以开发javasript项目都要下载安装和配置node. 传送 ...
- principal components analysis 主成份分析
w http://deeplearning.stanford.edu/wiki/index.php/主成份分析 主成分分析(PCA)及其在R里的实现 - jicf的日志 - 网易博客 http:// ...
- C#和.NET获取绝对路径
c#获取绝对路径:System.IO.Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "log.txt"); .net获取绝 ...
- 【GIS数据处理】 利用空间关系建立线CAD数据和属性表关联
这两天遇到一个不太容易解决的问题. 某燃气公司想自己对自建管线进行测绘便于数字化管理,在接受了简单的RTK测量培训和Cass成图培训后,就自己着手开干. 最近数据整理的差不多了,就提交给我请我帮忙核查 ...