Home >Web Front-end >H5 Tutorial >Sample code sharing for paging using html5 API

Sample code sharing for paging using html5 API

黄舟
黄舟Original
2017-03-31 13:38:222600browse

Use html5 Api to implement pagination sample code sharing

//htmlapi.php
<?php
    //header("content-type:text/html;charset=utf-8");
    $dsn=&#39;mysql:host=127.0.0.1;dbname=edusoho&#39;;
    $db=new PDO($dsn,&#39;root&#39;,&#39;root&#39;);
    $page=isset($_GET[&#39;p&#39;])?$_GET[&#39;p&#39;]:&#39;1&#39;;
    $pagesize=&#39;10&#39;;
    $limit=($page-1)*$pagesize;
    $sql=&#39;select count(*) as num  from course_lesson_text&#39;;
    $rs=$db->query($sql);
    $ar=$rs->fetch();
    $count=$ar[&#39;num&#39;];
    $pagecount=ceil($count/$pagesize);
    $sql="select id,title from course_lesson_text limit $limit,$pagesize";
    $rs=$db->query($sql);
    $arr=$rs->fetchAll();
    $next=$page+1>$pagecount?$pagecount:$page+1;
        $up=$page-1<1?1:$page-1;
    $pagea="<a class=&#39;pa&#39; href=&#39;?p=1&#39;>首页</a><a class=&#39;pa&#39; href=&#39;?p=$up&#39;>上一页</a>
    <a class=&#39;pa&#39; href=&#39;?p=$next&#39;>下一页</a><a class=&#39;pa&#39; href=&#39;?p=$pagecount&#39;>尾页</a>";
    $exit[&#39;arr&#39;]=$arr;
    $exit[&#39;page&#39;]=$pagea;
    exit(json_encode($exit));
 ?>
//index.php
<?php
    header("content-type:text/html;charset=utf-8");
    $dsn=&#39;mysql:host=127.0.0.1;dbname=edusoho&#39;;
    $db=new PDO($dsn,&#39;root&#39;,&#39;root&#39;);
    $page=isset($_GET[&#39;p&#39;])?$_GET[&#39;p&#39;]:&#39;1&#39;;
  //$page=1;
    $pagesize=&#39;10&#39;;
    $limit=($page-1)*$pagesize;
    $sql=&#39;select count(*) as num  from course_lesson_text&#39;;
    $rs=$db->query($sql);
    $ar=$rs->fetch();
    $count=$ar[&#39;num&#39;];
    $pagecount=ceil($count/$pagesize);
    $sql="select id,title from course_lesson_text limit $limit,$pagesize";
    $rs=$db->query($sql);
    $arr=$rs->fetchAll();
    ?>
    <meta charset=&#39;utf-8&#39;/>
    <ul class="list">
        <?php foreach ($arr as $key => $value) {
            ?>
            <li><?php echo $value[&#39;title&#39;] ?></li>
            <?php
        } ?>
    </ul>
    <?php 
        $next=$page+1>$pagecount?$pagecount:$page+1;
        $up=$page-1<1?1:$page-1;
    ?>
    <div id="pagea">
    <a class=&#39;pa&#39; href="?p=1">首页</a>
     <a class=&#39;pa&#39; href="?p=<?php echo $up ?>">上一页</a>
    <a class=&#39;pa&#39; href="?p=<?php echo $next ?>">下一页</a>
    <?php
        /*for($i=1;$i<$pagecount;$i++){
            echo"<a class=&#39;pa&#39; href=&#39;?p=$i&#39;>$i</a>";
        }*/
    ?>
    <a class=&#39;pa&#39; href="?p=<?php echo $pagecount ?>">尾页</a>
    </div>
    <script src=&#39;./jquery-1.8.0.js&#39; ></script>
    <script>
$(function(){
    var ajax,
        currentState;
$(".pa").live("click",function(e){
        e.preventDefault();
        var target = e.target,
           url = $(target).attr("href");
        !$(this).hasClass("current") && $(this).addClass("current").siblings().removeClass("current");
         if(ajax == undefined) {
            currentState = {
                url: document.location.href,
                title: document.title,
                html: $(".list").html()
            };
        }
        ajax = $.ajax({
                type:"get",
                url: &#39;htmlapi.php&#39;+url,
                dataType:"json",
                success: function(data){
                    var html = "";
                    if(data[&#39;arr&#39;].length > 0) {
                        $.each(data[&#39;arr&#39;],function(k,v){
                            html += "<li>"+v.title+"</li>"
                        })
                        $(".list").html(html);  
                    }
                    var state = {
                        url: url,
                        title: document.title,
                        html: $(".list").html()
                    };
                    $("#pagea").html(data[&#39;page&#39;]);
                    history.pushState(state,null,url);
                }
        });
    });
   window.addEventListener("popstate",function(event){
        if(ajax == null){
                return;
            }else if(event && event.state){
                document.title = event.state.title;
                $(".list").html(event.state.html);
            }else{
                document.title = currentState.title;
                $(".list").html(currentState.html);
            }
    });
 });

The above is the detailed content of Sample code sharing for paging using html5 API. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn