Exemple de partage de code pour la pagination à l'aide de l'API HTML5-Tutoriel H5-php.cn

Maison

interface Web

Tutoriel H5

Exemple de partage de code pour la pagination à l'aide de l'API HTML5

Mar 31, 2017 pm 01:38 PM

Utilisation de html5 Api pour implémenter la pagination le partage d'exemples de code

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

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn