您的位置: 首页  >  文章  >  layui.flow-流加载-ajax-事例

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

分类: 文章 • 2025-06-28 22:13:40

为什么80%的码农都做不了架构师？>>>   layui.flow-流加载-ajax-事例

<?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);

 

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

 

转载于:https://my.oschina.net/yjft/blog/1518823

相关推荐