weui下拉刷新分頁實現 thinkphp後臺

前臺模板頁面

<!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();
    }

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章