`
hudeyong926
  • 浏览: 2035024 次
  • 来自: 武汉
社区版块
存档分类
最新评论

比较全面的php分页导航类

阅读更多
瀑布流分页当浏览者浏览了当前页面内容后,向下拉动浏览器滚动条,本来还在服务器上的内容,会根据滚动条的拖动,动态地从服务器上按一定的单位(类似分页)下载下来。这样还带来了一个好处,就是以前已经浏览过的内容,还在浏览器当前窗口的上部(可以理解为被缓存了),要再次浏览的话,直接向上拖动滚动条或转动鼠标 滚轮即可。而采用分页技术的话,要查看先前的内容,必需再次点击鼠标(比如“上一页”等),再次请求服务器端的页面(假设没有采用缓存技术的),再次等待 页面数据的下载和呈现 。实现这种浏览效果,可以改善用户体验(最起码有新鲜感),编程技术也不难,采用 Ajax 技术是一种绝好的解决方案之一。希望更好的用户体验被大家创造出来。

 

分页存储过程http://hudeyong926.iteye.com/blog/764703

var page = 0;
$(function () {
    var scrollTimer;
    jsonScrollPageData(0);//默认加第一页

    //下面滚动取第二页++
    $(window).on('scroll', function () { //页面出现滚动条生效,即滚动事件
        if (scrollTimer) {
            clearTimeout(scrollTimer);
            scrollTimer = null;
        }
        scrollTimer = setTimeout(function () {
            jsonScrollPageData($(this).scrollTop());
        }, 200);//0.2s
    });
});

function jsonScrollPageData(position) {
    var offsetHeight = 44;
    var viewportHeight = $(window).height();
    var bodyHeight = $('body').height();

    if ((bodyHeight <= position + viewportHeight + offsetHeight) && page >= 0) {
        $.ajax({
            type: 'GET',
            url: url + "?t=" + Math.random(),
            data: {page: ++page},
            async: false,
            dataType: 'JSON',
            success: function (jsonData) {
                if (jsonData.length > 0) {

                } else { //已全部显示
                    page = -1;
                }
            }
        });
    }
}
移动端上拉加载下拉刷新插件
<div class="container">
    <div id="mescroll" class="my-address mescroll">
        <div id="addressList" class="address-list">
            <!-- 这里是ajax返结果list -->
        </div>
    </div>
</div>
 需要注意的地方是页面的container必须有固定高度,否则上拉无效。前后端的pagesize必须要相同
//创建MeScroll对象
var mescroll = new MeScroll("mescroll", {
    up: {
        callback: upCallback, //上拉加载的回调
        clearEmptyId: "addressList",
        htmlNodata: '<p class="upwarp-nodata">-- 已经到底了 --</p>',
        noMoreSize: 5, //这个是当页面显示不足这个数字的时候不显示到底定义的文字,比如不满足5条,则不显示htmlNodata  
    }
});

//上拉加载的回调 page = {num:1, size:10}; num:当前页 默认从1开始, size:每页数据条数,默认10
function upCallback(page) {
    $.ajax({
        url: '/screen/ajaxList?page=' + page.num + '&pageSize=' + page.size,
        dataType: 'json',
        type: 'GET',
        success: function (json) {
            console.log(json)
            var data = json.data;
            var _html = $('#addressListTmpl').render(data);
            $('#addressList').append(_html);
            //必传参数(总数据个数, 总页数)
            mescroll.endByPage(curPageData.length, totalPage);
        },
        error: function (e) {
            //联网失败的回调,隐藏下拉刷新和上拉加载的状态
            mescroll.endErr();
        }
    });
}
 
分享到:
评论

相关推荐

    php封装的page分页类.zip

    "php封装的page分页类" 是一个专门用于处理这种需求的类库,它简化了PHP分页的实现过程,通过封装核心逻辑,使开发者能够快速、高效地实现分页功能。 首先,我们要理解分页的基本原理。在数据库查询中,如果一次性...

    PHP分页导航

    在网页开发中,当数据量较大时,分页导航是一个必不可少的功能,它使得用户能够方便地浏览和查找大量信息,而不会一次性加载所有内容导致页面响应慢或浏览器卡顿。PHP作为广泛使用的服务器端脚本语言,提供了实现...

    万能的php分页类实例代码

    本实例代码提供了一种“万能”的PHP分页类,它可以帮助开发者轻松实现各种场景下的分页需求。 首先,让我们了解分页的基本原理。分页通常通过计算总页数、当前页数、每页显示的记录数来实现。当用户点击页码或使用...

    php完美分页类

    一款适合各种分页的分页类,可以直接根据构造函数的提示直接使用,分页导航直接调用最后的那个函数,非常完美的分页,考虑到各种情况.

    php分页类(通用)

    - **渲染视图**:将查询结果传递给视图,并利用分页类生成的HTML链接渲染分页导航。 5. 兼容性和扩展性 - **URL模式支持**:为了适应不同类型的URL结构,分页类可能需要支持GET参数、路径参数等多种方式传递页码...

    自己写的一个php的分页类

    通过分析这些文件,我们可以学习到如何设计和实现一个自定义的PHP分页类,以及如何在实际项目中应用它。理解分页机制对于任何处理大量数据的PHP开发者来说都是至关重要的,因为这有助于优化性能,避免一次性加载过多...

    php 分页类 源码

    本压缩包提供的"php 分页类 源码"是一个实用的工具,可以帮助开发者轻松实现网页的分页功能。这个分页类包含了多种样式,适应不同网页设计的需求,同时也支持通过AJAX无刷新地进行分页操作,提升用户体验。 首先,...

    php无敌分页 php多种分页类,php分页大全

    总的来说,这个资料包提供了一个全面的PHP分页解决方案,涵盖了从基本的分页实现到复杂的分页类库,以及与之相关的CSS设计。通过学习和理解这些内容,开发者可以更好地处理大型数据集的显示,提升用户体验。

    php实现的分页类.zip

    下面将详细探讨PHP分页类的核心原理、设计模式以及如何在实际项目中应用。 一、分页类的设计原理 1. 计算总页数:分页类首先需要获取数据库中的总记录数,然后根据每页显示的数据量(通常称为每页条数)来计算总...

    PHP 分页类

    下面是一个简单的PHP分页类示例: ```php class Pagination { public function __construct($totalRows, $perPage, $currentPage = 1) { $this-&gt;totalRows = $totalRows; $this-&gt;perPage = $perPage; $this-&gt;...

    php 分页类 可输入页面跳转

    本实例将介绍如何创建一个PHP分页类,支持用户输入页面跳转。 首先,理解分页的基本原理:假设我们有一个查询结果集,需要分成若干页展示。每一页包含固定的记录数量(例如,10条)。分页类的主要任务是计算总页数...

    php按字数分页类

    4. 生成分页链接:创建分页导航,包括“上一页”、“下一页”和页码列表。 5. 获取当前页内容:根据当前页码和每页字数截取文本内容。 `create_table.php`可能用于创建一个测试数据库表,以便进行PHP与MySQL的分页...

    PHP分页类集锦

    每个分页类都具备基本的分页功能,比如根据用户请求的页码来决定返回哪些数据,生成分页导航等。这些分页类通常会使用一些参数,如每页显示的数据量和总数据量等,来构建分页逻辑。 分页类的代码一般会包含以下几个...

    史上最强大的php分页类

    总结来说,“史上最强大的PHP分页类”应该是功能全面、易用且高度可定制的工具,它简化了开发者处理分页逻辑的复杂性,提高了代码的可读性和项目的可维护性。通过对上述关键知识点的理解和实践,开发者可以构建出...

    PHP+MYSQL分页代码类

    4. 创建分页导航:显示页码链接,让用户可以跳转到其他页面。 在提供的`page.inc.php`文件中,这个分页类可能包含了以下组件: - `构造函数`:接收必要的参数,如每页记录数、当前页码等。 - `计算总页数`的方法:...

    PHP的一个超强分页类

    本篇文章将深入探讨一个名为"page.class.php"的PHP分页类,以及如何使用它来实现高效的分页功能。 首先,我们要理解分页的基本原理。在网页上,如果一次性加载所有数据,不仅会消耗大量服务器资源,而且可能导致...

    一个很好的可以实现php分页的类

    标题提到的“一个很好的可以实现PHP分页的类”显然是一种高效的解决方案,它封装了分页的逻辑,使得开发者能够更便捷地在项目中实现分页功能。下面我们将详细探讨PHP分页类的设计原理、实现方法以及如何在实际应用中...

    php智能分页类

    二、PHP分页类的设计思路 PHP智能分页类通常包括以下几个核心功能: 1. 计算总页数:根据查询结果中的记录数和每页显示的记录数来确定。 2. 生成链接:创建链接到不同页面,通常包括上一页、下一页、首页和末页。 3....

    PHP分页类curpage

    "PHP分页类curpage"是用于实现这一功能的一个自定义类,下面我们将深入探讨这个类的原理、设计思路以及如何使用。 首先,我们需要理解分页的基本概念。分页通常涉及到两个关键参数:当前页(currentPage)和每页...

Global site tag (gtag.js) - Google Analytics