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,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-事例

猜你在找的Ajax相关文章