文档章节

layui.flow-流加载-ajax-事例

高处胜寒
 高处胜寒
发布于 2017/08/22 17:38
字数 444
阅读 293
收藏 0
<?php

/**
 * @Author: 飛天
 * @Date:   2017-08-22 17:00:08
 * @Last Modified by:   飛天
 * @Last Modified time: 2017-08-22 17:00:10
 */


?>


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="./css/layui.css" media="all">
    <style>
        .flow-default {
            margin-top: 15px;
            width: 600px;
            height: 400px;
            overflow: auto;
            font-size: 0;
        }

        .flow-default li {
            display: inline-block;
            margin: 0 5px;
            font-size: 14px;
            width: 48%;
            margin-bottom: 10px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            background-color: #eee;
        }

    </style>
</head>
<body>


<ul class="flow-default" id="demo">

</ul>


<script src="./layui.js" charset="utf-8"></script>

<script>


    layui.use('flow', function () {
        var $ = layui.jquery; //不用额外加载jQuery,flow模块本身是有依赖jQuery的,直接用即可。
        var flow = layui.flow;
        flow.load({
            elem: '#demo' //指定列表容器
            , done: function (page, next) { //到达临界点(默认滚动触发),触发下一页
                var lis = [];
                //以jQuery的Ajax请求为例,请求下一页数据(注意:page是从2开始返回)
                $.get('./ajax.php?page=' + page, function (res) {

                    var jsondata = $.parseJSON(res);

                    console.log(jsondata);


                    //假设你的列表返回在data集合中
                    layui.each(jsondata.data, function (index, item) {
                        lis.push('<li>' + item.student_name + '---' + item.mobile + '</li>');
                    });

                    //执行下一页渲染,第二参数为:满足“加载更多”的条件,即后面仍有分页
                    //pages为Ajax返回的总页数,只有当前页小于总页数的情况下,才会继续出现加载更多
                    next(lis.join(''), page < jsondata.pages);
                });
            }
        });
    });

</script>

</body>
</html>

 

<?php

/**
 * @Author: 飛天
 * @Date:   2017-08-22 16:57:50
 * @Last Modified by:   飛天
 * @Last Modified time: 2017-08-22 16:58:16
 */


define("HOST", "aaaaa");    //主机名
define("USER", "bbbbbb");        //账号
define("PASS", "cccccc");        //密码
define("DBNAME", "xx-database");    //数据库名


$link = mysql_connect(HOST, USER, PASS);

mysql_select_db(DBNAME);


$page = $_GET["page"];
$num = 6;
$ofset = ($page - 1) * $num;

$t_sql = "SELECT student_name,course_name,mobile FROM edu_trxorder WHERE course_id=898 AND trx_status='SUCCESS'";

$t_res = mysql_query($t_sql);

//总记录数
$total = mysql_num_rows($t_res);

//总页数
$totalpage = ceil($total / $num);

$sql = "SELECT student_name,course_name,mobile FROM edu_trxorder WHERE course_id=898 AND trx_status='SUCCESS' LIMIT $ofset,$num ";


$res = mysql_query($sql);

$arr = array();


while ($row1 = mysql_fetch_assoc($res)) {
    $arr[] = $row1;
}


$a = array("pages" => $totalpage, "data" => $arr);

echo json_encode($a);

 

 

© 著作权归作者所有

高处胜寒

高处胜寒

粉丝 9
博文 213
码字总数 148499
作品 0
西安
程序员
私信 提问
thinkPHP实现瀑布流的方法

thinkPHP实现瀑布流的方法 文章TAG:thinkphp 瀑布流 过期已备案域名,注册就能用!终身VIP会员,畅享源码下载织梦精美仿站,火热预定中! 本文实例讲述了thinkPHP实现瀑布流的方法。分享给大...

thinkyoung
2015/10/10
0
0
jQuery瀑布流 ajax加载动态数据问题

jQuery 瀑布流 使用ajax加载数据库图片url ajax每次请求到的数据不变时 瀑布流效果没问题。 但当请求到的数据变化时,瀑布流图片格式会重叠 或者相隔很远等等的格式问题

viki_php
2015/11/10
2K
2
jQuery 瀑布流 ajax动态加载 图片格式出错

jQuery 瀑布流 使用ajax加载数据库图片url ajax每次请求到的数据不变时 瀑布流效果没问题。 但当请求到的数据变化时,瀑布流图片格式会重叠 或者相隔很远等等的格式问题, waterfall.js代码 ...

viki_php
2015/11/11
400
3
还是关于瀑布流的问题

瀑布流我用masonry+AJAX做好了 但是需要需要做到无限加载那个瀑布流 ..我大体知道点思路,是先判断那个滚动条 大于多少的时候 就触发AJAX去数据库里面读取。。。请问下具体怎么实现的...

ahkxhyl
2013/01/19
301
2
LayPage 1.0 发布,适用多场景 JavaScript 分页

laypage主要应用于前端页面Ajax普通分页以及信息流加载,并且可无缝迁移至Node.js平台。她不依赖于任何第三方库,直接拿来用即可,其接口继承了layui系列组件的一贯简洁,极易上手。那么,从...

贤心
2014/12/11
5.6K
15

没有更多内容

加载失败,请刷新页面

加载更多

spring mvc主流程源码阅读(剖析)

第一步,通过web.xml的配置可以知道,用户访问url第一次先走到DispatchServlet,(默认你学过基本的java的Servlet开发) <servlet><servlet-name>springServlet</servlet-name><serv......

小海bug
16分钟前
2
0
vmstat命令详解

https://www.cnblogs.com/ggjucheng/archive/2012/01/05/2312625.html

流光韶逝
50分钟前
1
0
如何理解算法时间复杂度的表示

先从O(1) 来说,理论上哈希表就是O(1)。因为哈希表是通过哈希函数来映射的,所以拿到一个关键 字,用哈希函数转换一下,就可以直接从表中取出对应的值。和现存数据有多少毫无关系,故而每次执...

yky20190625
今天
5
0
分布式架构 实现分布式锁的常见方式

一、我们为什么需要分布式锁? 在单机时代,虽然不需要分布式锁,但也面临过类似的问题,只不过在单机的情况下,如果有多个线程要同时访问某个共享资源的时候,我们可以采用线程间加锁的机制...

太猪-YJ
今天
9
0
GitLab Docker 安装记录

安装环境 环境Centos7.4 64 1.拉取镜像文件 docker pull gitlab/gitlab-ce:latest 2.docker 安装 git.zddts.com 为访问域名或换成可以访问的IP docker run -d --hostname git.***.com -p ......

侠者圣
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部