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

发布时间：2020-12-16 03:20:33 所属栏目：百科来源：网络整理

导读：?php/** * @Author: 飛天 * @Date: 2017-08-22 17:00:08 * @Last Modified by: 飛天 * @Last Modified time: 2017-08-22 17:00:10 */?!DOCTYPE htmlhtmlhead meta charset="utf-8" titlelayui/title meta name="renderer" content="webkit" meta http-equiv=

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!