weui下拉刷新分页实现 thinkphp后台

最新推荐文章于 2022-01-08 16:21:06 发布

乌云大帝

最新推荐文章于 2022-01-08 16:21:06 发布

阅读量971

点赞数

分类专栏： web前端文章标签： weui 下拉刷新分页 thinkphp3.2

本文链接：https://blog.csdn.net/wydd7522/article/details/89465636

版权

web前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

前台模板页面

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>查看成绩页</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="{$smarty.const.HOME_CSS_URL}/weui.css"/>
    <link rel="stylesheet" href="{$smarty.const.HOME_CSS_URL}/weuix.css"/>

    <script src="{$smarty.const.HOME_JS_URL}/zepto.min.js"></script>
    <script src="{$smarty.const.HOME_JS_URL}/php.js"></script>

</head>

<body ontouchstart>

<div class="page-hd">
    <h1 class="page-hd-title">
        {cookie('Front_name')} 的考试成绩
    </h1>
    <p class="page-hd-desc">正常情况每个月参加一次考试</p>
</div>


<div class="page-bd-15">
    <div class="weui-cells" id="rank-list">
    </div>

    <div class="weui-loadmore" id="more">
        <i class="weui-loading"></i>
        <span class="weui-loadmore__tips">正在加载</span>
    </div>
</div>


<script id="tpl" type="text/html">

    <table class="weui-table weui-table-2n" >
        <thead>
        <tr><th>考试时间</th><th>成绩</th><th>结果</th></tr>
        </thead>
        <tbody >
        <% for(var i in list) {   %>
        <tr><td title="考试时间"><%=date("Y-m-d",list[i].time)%></td><td title="成绩"><%=list[i].result%>分</td><td title="结果">
            <% if (list[i].result>80) { %>
                <span style="color:#04BE02;">通过体检</span>
            <% } else if (list[i].result>=50) { %>
                <span style="color:#18B4ED;">需要再教育</span>
            <% } else { %><span style="color:#EF4F4F;">
                体检不合格</span>
            <% } %>
        </td></tr>
        <% } %>
        </tbody>

    </table>

</script>



<script>

    var pagesize=5;//每页数据条数
    var page = 2;
    var maxpage;
    $('#more').hide();
    function ajaxpage(page){
        //alert(page);
        $.ajax({
            type : "POST",
            url : '{$smarty.const.__ACTION__}',
            data: {
                "page":page,
                "pagesize":pagesize
            },
            dataType : "json",
            beforeSend:function(){
                $("#more").show();
            },
            success : function(rs) {
                //alert(rs.total);
                $("#rank-list").append(tpl(document.getElementById('tpl').innerHTML,rs));
                var maxpage = Math.ceil(rs.total / pagesize);
                sessionStorage['maxpage'] = maxpage;
            },
            timeout : 15000
        });
    }

    $(window).scroll(
        function() {
            var scrollTop = $(this).scrollTop();//滚动条的垂直偏移
            var scrollHeight = $(document).height();
            var windowHeight = $(this).height();
            if (scrollTop + windowHeight == scrollHeight) {
                maxpage = sessionStorage['maxpage'];
                if(page<=maxpage) {
                    ajaxpage(page);
                    page++;
                    //if(page==maxpage){
                   //     $("#more").html("没有更多数据了");return false;
                   // }
                }else{
                    $("#more").html("没有更多数据了");return false;
                }
            }

        });
    $(function(){
        ajaxpage(1);
    })

</script>

<br>
<br><br>
<br>


<a href="{$smarty.const.__MODULE__}/Index/index"  class="weui-btn weui-btn_default">返回首页</a>
<br>

</body>
</html>

后台控制器方法 (thinkphp3.2)

//考试结果查询页
    public function showlist(){
        if(IS_POST){
            $result=M("result");
            $total      = $result->where("uid=".cookie('Front_id'))->count();

            $pindex = max(1, I('page'));
            $psize = I('pagesize');

            $list =  $result->where("uid=".cookie('Front_id'))->order("time desc")->limit(($pindex - 1) * $psize.','.$psize)->select();
            
            $data['status']  = 1;
            $data['total'] = $total;
            $data['list'] = $list;
            $this->ajaxReturn($data);
        }


       $this->display();
    }

乌云大帝

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
weui下拉刷新分页实现 thinkphp后台

前台模板页面<!doctype html><html><head> <meta charset="utf-8"> <title>查看成绩页</title> <meta name="viewport" content="width=device-width,initial-scale=1,...
复制链接

扫一扫