利用html5 Api实现分页的示例代码分享

利用html5 api实现分页的示例代码分享

Modoer多功能点评系统2.5 精华版 Build 20110710 UTF8

Modoer 是一款以本地分享，多功能的点评网站管理系统。采用 PHP+MYSQL 开发设计，开放全部源代码。因具有非凡的访问速度和卓越的负载能力而深受国内外朋友的喜爱，不局限于商铺类点评，真正实现了多类型的点评，可以让您的网站点评任何事与物，同时增加产品模块，也更好的网站产品在网站上展示。Modoer点评系统 2.5 Build 20110710更新列表1.同步 旗舰版系统框架2.增加 限制图片

下载

//htmlapi.php
<?php
    //header("content-type:text/html;charset=utf-8");
    $dsn='mysql:host=127.0.0.1;dbname=edusoho';
    $db=new PDO($dsn,'root','root');
    $page=isset($_GET['p'])?$_GET['p']:'1';
    $pagesize='10';
    $limit=($page-1)*$pagesize;
    $sql='select count(*) as num  from course_lesson_text';
    $rs=$db->query($sql);
    $ar=$rs->fetch();
    $count=$ar['num'];
    $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='pa' href='?p=1'>首页</a><a class='pa' href='?p=$up'>上一页</a>
    <a class='pa' href='?p=$next'>下一页</a><a class='pa' href='?p=$pagecount'>尾页</a>";
    $exit['arr']=$arr;
    $exit['page']=$pagea;
    exit(json_encode($exit));
 ?>
//index.php
<?php
    header("content-type:text/html;charset=utf-8");
    $dsn='mysql:host=127.0.0.1;dbname=edusoho';
    $db=new PDO($dsn,'root','root');
    $page=isset($_GET['p'])?$_GET['p']:'1';
  //$page=1;
    $pagesize='10';
    $limit=($page-1)*$pagesize;
    $sql='select count(*) as num  from course_lesson_text';
    $rs=$db->query($sql);
    $ar=$rs->fetch();
    $count=$ar['num'];
    $pagecount=ceil($count/$pagesize);
    $sql="select id,title from course_lesson_text limit $limit,$pagesize";
    $rs=$db->query($sql);
    $arr=$rs->fetchAll();
    ?>
    <meta charset='utf-8'/>
    <ul class="list">
        <?php foreach ($arr as $key => $value) {
            ?>
            <li><?php echo $value['title'] ?></li>
            <?php
        } ?>
    </ul>
    <?php 
        $next=$page+1>$pagecount?$pagecount:$page+1;
        $up=$page-1<1?1:$page-1;
    ?>
    <div id="pagea">
    <a class='pa' href="?p=1">首页</a>
     <a class='pa' href="?p=<?php echo $up ?>">上一页</a>
    <a class='pa' href="?p=<?php echo $next ?>">下一页</a>
    <?php
        /*for($i=1;$i<$pagecount;$i++){
            echo"<a class='pa' href='?p=$i'>$i</a>";
        }*/
    ?>
    <a class='pa' href="?p=<?php echo $pagecount ?>">尾页</a>
    </div>
    <script src='./jquery-1.8.0.js' ></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: 'htmlapi.php'+url,
                dataType:"json",
                success: function(data){
                    var html = "";
                    if(data['arr'].length > 0) {
                        $.each(data['arr'],function(k,v){
                            html += "<li>"+v.title+"</li>"
                        })
                        $(".list").html(html);  
                    }
                    var state = {
                        url: url,
                        title: document.title,
                        html: $(".list").html()
                    };
                    $("#pagea").html(data['page']);
                    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);
            }
    });
 });