ajax实现向上正在加载,向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)

/****

desc : 分页异步获取列表数据,页面向上滚动时候加载前面页码,向下滚动时加载后面页码

ajaxdata_url ajax异步的URL 如data.php

page_val_name ajax异步的URL中的页码参数名 如pageno

page_no 初始加载页码,默认1 [如2,则与前面两参数结合为data.php?pageno=2]

is_lazyload 是否开启懒加载

page_count 总页数

empty_msg 没有数据的时候提示(可传输图片)

ending_msg 最大页码显示提示

***/$.fn.list_data= function(options) {//参数

var This = $(this);var flag = false;//flag为false时为初次加载,防止不断加载

var defaults ={

ajaxdata_url:‘‘,

page_val_name:‘current‘,

page_no:1,

page_count:‘‘,

is_lazyload:true,

loading_msg:‘加载中...‘,

empty_msg:‘没有相关数据!‘,

ending_msg:‘没有更多数据了!‘};var opt =$.extend(defaults, options)//没有数据的提示语

if (opt.page_count <= 0) {

This.html("

" + opt.empty_msg + "
");return true;

}//获取页码,暂时不会用到

var get_return_page = function() {/*var url = location.href;

var page = ‘‘;

if (url.indexOf("#") > 0) {

var arr = url.split("#");

var pagestr = arr[1];

if (pagestr.indexOf("_") > 0) {

var arr2 = pagestr.split("_");

var page = arr2[0];

}

}

if (page == ‘‘ || page == undefined) {

return 1;

} else {

return page;

}*/

returnopt.page_no;

}//基础参数

var page = get_return_page() * 1;var page_up =page;var page_down =page;//异步加载数据

var loadmore = function(page, pos) {var loading = "

" + opt.loading_msg + "
";

$.ajax({

type:"GET",

url: opt.ajaxdata_url+ "&" + opt.page_val_name + "=" +page,

beforeSend:function() {

$(".ajax-loading").remove();

$(".ui-no-msg").remove();if (pos == ‘before‘) {

$(loading).insertBefore(This);

}else{

$(loading).insertAfter(This);

}

$(".ajax-loading").show();

flag= true;

},

dataType:"html",

error:function() {//This.html("

数据异常,请刷新重试!
");

$("

数据异常,请刷新重试!
").appendTo(This);

$(".ajax-loading").remove();

},

success:function(content) {

flag= false;

content=$.parseHTML(content);if (pos == ‘before‘) {

$(content).prependTo(This);

}else{

$(content).appendTo(This);

}

$(".ajax-loading").remove();

$(".ui-no-msg").remove();//是否开启懒加载

if (opt.is_lazyload == true) {

lazyLoadImgs(This);

}

}

});

}//懒加载

functionlazyLoadImgs(e) {

e.find("img").lazyload({

effect:"show",

event:"sporty"});var timeout = setTimeout(function () { e.find("img").trigger("sporty") }, 500);

}//初始加载

if (flag == false) {

loadmore(page,‘after‘);

$(window).scroll(function() {var scrollTop = $(this).scrollTop();var scrollHeight =$(document).height();var windowHeight = $(this).height();//滚动到顶部

if (scrollTop == 0) {if (page_up > 1) {

page_up--;

loadmore(page_up,‘before‘);//如不需要向上滚动加载,则注释掉此行

}

}else{//滚动到底部

if (scrollTop + windowHeight >= (scrollHeight - 200)) {if (page_down

page_down++;

loadmore(page_down,‘after‘);

}else{

$(".ajax-ending").remove();

$("

" + opt.ending_msg + "
").appendTo(This);

$(".ajax-ending").delay(2000).hide();

}

}

}

});

}

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/533084.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

js如何上传大文件到服务器,js将文件上传到远程服务器

js将文件上传到远程服务器 内容精选换一换将文件上传至Windows云服务器一般会采用MSTSC远程桌面连接的方式。本节为您介绍本地Windows计算机通过远程桌面连接&#xff0c;上传文件至Windows云服务器的操作方法。Windows云服务器可以访问公网。在本地Windows计算机上&#xff0c…

centos odbc mysql_Centos下安装并配置ODBC连接MySQL 【转】

找到一篇英文的关于Linux下ODBC的安装和配置&#xff0c;在此根据自己的需要截取部分记录一下。安装并配置ODBCODBC连接器是一个数据库抽象层&#xff0c;它可以让Asterisk与广泛的数据库进行通信&#xff0c;而无需开发人员为Asterisk需要的每一个数据库创建一个单独的数据库连…

增强服务器安全性能,加强Linux服务器安全的20项建议

很多人都说 Linux 在默认配置下很安全&#xff0c;我在一定程度上同意这个说法(很值得商榷的话题)。不过 Linux 内置的安全模型和工具做得确实很到位&#xff0c;用户只需进行简单的调整和自定义就可以加强 Linux 服务器安全。与恶意用户做斗争对于所有 Linux 系统管理员来说都…

mysql禁用历史命令_如何禁止mysql记录历史命令

如何禁止mysql记录历史命令&#xff1f;在执行 SQL命令时&#xff0c;mysql会将历史命令记录到~/.mysql_history文件中&#xff0c;因此我们用上下键就可以翻阅历史命令了。也许某些特殊需要我们可能需要不让它记录这些历史命令&#xff0c;我们可以这样作&#xff1a;[rootTes…

阴阳师师徒系统不同服务器,阴阳师体服师徒系统未收录改为随机SSR

昨天下午&#xff0c;受到很多争议的体服“师徒系统”更新啦&#xff01;新版的“师徒系统”修改了徒弟的条件&#xff0c;总的来说能剔除压级大佬&#xff0c;并且之前奖励未收录SSR降低为随机SSR式神&#xff0c;难怪很多阴阳师都说&#xff1a;“大快人心&#xff01;”的确…

Mysql union联合查询_Mysql联合查询union和union all的使用介绍

一、UNION和UNION ALL的作用和语法UNION 用于合并两个或多个 SELECT 语句的结果集&#xff0c;并消去表中任何重复行。UNION 内部的 SELECT 语句必须拥有相同数量的列&#xff0c;列也必须拥有相似的数据类型。同时&#xff0c;每条 SELECT 语句中的列的顺序必须相同.SQL UNION…

ios 查看同文件名_实战恢复cisco 2950交换机的IOS

本来想用两台思科交换机做实验的&#xff0c;可是通过console口进入其中一台交换机后却发现这个台交换机的IOS文件丢失了。本来正常进入交换机后应该是首先进入到用户模式的&#xff0c;而且提示符应该是“>”&#xff0c;而现在提示符却成了“&#xff1a;”&#xff0c;如…

repositoryitemlookupedit根据每行的id绑定数据_一种根据数据库自增ID生成唯一ID的解决方案...

在我们的开发过程中&#xff0c;经常会遇到ID生成的问题&#xff0c;那么这里就介绍一种解决方案&#xff0c;注意这里只适合混淆ID规则&#xff0c;也就是说生成的ID没有任何规则&#xff0c;不适用于订单ID。一般有序自增主键的ID&#xff0c;极易被爬虫抓取数据&#xff0c;…

bootstracp实现树形列表_Java实现一致性哈希算法,并搭建环境测试其负载均衡特性...

实现负载均衡是后端领域一个重要的话题&#xff0c;一致性哈希算法是实现服务器负载均衡的方法之一&#xff0c;你很可能已在一些远程服务框架中使用过它。下面我们尝试一下自己实现一致性哈希算法。一. 简述一致性哈希算法这里不详细介绍一致性哈希算法的起源了&#xff0c;网…

c# mysql数据库查询语句_C# mysql 查询

展开全部|mysql> select * from test_book1;-------------------------------------------------|e68a84e8a2ad3231313335323631343130323136353331333335303534 id | name | data |-------------------------------------------------| …

系统分析师和系统架构设计师难度比较_系统架构设计师,马上开课了!

一年只考一次的系统架构设计师7月7日通关指南开课系统架构设计师考试&#xff0c;是2009年11月计算机资格考试新增专业&#xff0c;这个级别属于高级资格考试。与该考试同级别的还有系统分析师、信息系统项目管理师、系统规划与管理师以及网络规划设计师。系统架构设计师每年考…

运维人员mysql如何访问_mysql 运维常见操作

MySQL密码的恢复方法之一1&#xff0e;首先确认服务器出于安全的状态&#xff0c;也就是没有人能够任意地连接MySQL数据库。 因为在重新设置MySQL的root密码的期间&#xff0c;MySQL数据库完全出于没有密码保护的 状态下&#xff0c;其他的用户也可以任意地登录和修改MySQL的信…

mocha 测试 mysql_node项目mocha自动化测试的疑问

测试框架&#xff1a;mocha数据库&#xff1a;mysql和mongodb疑问1. 如何控制多个测试用例的运行顺序&#xff1f;用例写多了&#xff0c;A用例把数据变成了状态1&#xff0c;有些后面的用例基于这个状态1的数据进行查询判断&#xff0c;才能使得后面的用例正常运行&#xff0c…

pythonhelloworld实例_Python基于Tkinter的HelloWorld入门实例

本文实例讲述了Python基于Tkinter的HelloWorld入门实例。分享给大家供大家参考。具体分析如下&#xff1a;初学Python&#xff0c;打算做几个Tkinter的应用来提高。刚学的HelloWorld&#xff0c;秀一下。我用Python3.2的&#xff0c;Windows版本的。源代码如下&#xff1a; #导…

tensorflow提取mel谱特征_【脑电信号分类】脑电信号提取PSD功率谱密度特征

点击上面"脑机接口社区"关注我们更多技术干货第一时间送达本文是由CSDN用户[frostime]授权分享。主要介绍了脑电信号提取PSD功率谱密度特征&#xff0c;包括&#xff1a;功率谱密度理论基础、matlab中PSD函数的使用介绍以及实验示例。感谢 frostime&#xff01;1. 序…

mysql用户可以localhost登陆_【单选题】登陆MySQL服务器,默认的用户名为 A. user B. pwd C. root D. localhost...

功能清利湿热、利胆退黄的药物是A、茵陈蒿B、猪苓C、泽泻D、滑石E、关木通舌尖上对酸味特别敏感的部位是_____。EDI的中文名称是什么&#xff1f;什么维生素能促进血液的凝固&#xff1f;当输油喷射泵故障时&#xff0c;Ⅱ组油箱是如何向Ⅲ组油箱供油的&#xff1f;A.通过溢油口…

从mysql中取出代理ip_GitHub - lican09/IPProxyTool: 抓取大量免费代理 ip,提取有效 ip 使用...

IPProxyTool使用 scrapy 爬虫抓取代理网站&#xff0c;获取大量的免费代理 ip。过滤出所有可用的 ip&#xff0c;存入数据库以备使用。可以访问我的个人站点&#xff0c;查看我的更多有趣项目 awolfly9个人项目欢迎加微信吐槽如果在使用中有任何疑问&#xff0c;或者项目中有任…

docker卸载 windows版本_DevOps系列 006 - Docker安装

这是DevOps系列的第六节&#xff0c;我们开始安装DockerDebian 上安装可以基于最新debian10的发行版&#xff0c;我现在还用着debian9&#xff0c;不过随后&#xff0c;我会发出Windows / macOs / Ubuntu的参考。安装如果您已经是root用户&#xff0c;则无需使用sudo1、卸载任何…

mysql设置success信息_【原创】MySQL Cluster安装部署(Success)

参考&#xff1a;http://www.cnblogs.com/zhoulf/archive/2013/01/30/2883207.html安装要求安装环境&#xff1a;centos6.3(X64)软件名称 &#xff1a;mysql-cluster-gpl-7.3.8-linux-glibc2.5-x86_64.tar.gz (通用版)管理节点IP:10.61.5.51数据节点-SQL节点IP:10.61.5.52数据节…

tab vue 竖排_vue 实现tab切换保持数据状态

页面做tab切换&#xff0c;由于组件每一次切换都会重新实例化组件&#xff0c;我们想要页面不论怎么切换都仍然保持tab里面的内容不会刷新&#xff0c;减少页面重新渲染以及减少请求实现方法&#xff1a;使用包裹组件 列表页面跳转详情 &#xff0c;列表页面保持上一次操作状态…