Php+jQueryがAJAX改ページ効果を実現しました。

http://www.helloweba.com/demo/paginate/
http://www.helloweba.com/view-blog-45.html
Aug
31
PHP+jQueryはAjax改ページ効果を実現します。
hello weba.com Author：月光光 Time：2010-08-31 17:44 Tag: jPaginate  jQueryプラグイン  Ajax  改ページ 
jPaginateはjQueryの動感に基づいて改ページプラグインをスクロールします。その表現形式は改ページのボタンのように面白いのはこれらのボタンがスクロールできます。クリックまたはマウスを通じて点の両側の小さな矢印をクリックしてボタンの前後のスクロールを制御できます。

 
jPaginateプラグインを呼び出す方法は簡単です。

 
 $(elementID).paginate() 

属性の設定
嬉しいことに、jPaginateは多くの属性構成を提供しており、希望の改ページ効果を簡単にカスタマイズできます。
設定方法は以下の通りです

 
 $(elementID).paginate({ 
      count:80, 
      start:1, 
      ... 
 }) 

count：数字、総記録数。
start：数字、表示開始ページ数、例えば：3は第3ページから開始することを示します。
デジタル、改ページバーに表示されるページ数、例えば：5は一回に5つのページ番号を表示します。
border:ページ番号の枠が表示されますか？（true/false）
バーディー.カラー：フレームの色を設定します。
text_.カラー：ページ番号の色を設定します。
background_カラー：ページ番号の背景色を設定します。
バーディー.ホバー.カラー:マウスをページ番号にスライドさせる際のページ番号の枠の色を設定します。
text_.ホバー.カラー:マウスをページ番号にスライドさせる際のページ番号の色を設定します。
background_ホバー.カラー:マウスをページ番号にスライドさせるときのページ番号の背景の色を設定します。
imags:ページ番号ガイドの矢印が表示されますか？（true/false）
mouse:pressに設定した場合、マウスがナビゲーション矢印にスライドすると、ページ番号がスクロールされます。「slade」に設定すると、ナビゲーション矢印のページ番号をクリックしてスクロールします。
onChange:ページ番号をクリックすると、コールバック関数が表示されます。
実例応用：PHP+jQueryはAjax改ページ効果を実現します。
まずindex.phpを用意して、ページを分けてブログの記事リストを展示します。
1、JSを引用する：

 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.paginate.js"></script> 
<script type="text/javascript"> 
$(function(){ 
    $("#demo").paginate({ 
        count         : <?php echo $page;?>, 
        start         : 1, 
        display     : 5, 
        border                    : true, 
        border_color            : '#BEF8B8', 
        text_color              : '#79B5E3', 
        background_color        : '#E3F2E1',     
        border_hover_color        : '#68BA64', 
        text_hover_color          : '#2573AF', 
        background_hover_color    : '#CAE6C6',  
        images                    : false, 
        mouse                    : 'press', 
        onChange                 : function(page){ 
                                    $("#pagetxt").load("article.php?id="+page); 
                                 } 
    }); 
}); 
</script>  

なお、プラグインの属性設定については、上記で詳細に説明したように、プロパティcountはPHPを介して全ページ数$pageを算出し、このパラメータはarticale.phpから導出される。また、プロパティonChangeです。ページ番号をクリックすると、関数を呼び出して、ページ番号のパラメータをarticale.phpに提出することを実現しました。artic.phpはデータベース内の表の書籍を読み取り、得られた記事のリストの結果をページに返します。これはAjaxです。もちろん、ここでは簡単なプレゼンテーションをするだけです。もし異歩効果が必要なら、jQueryを参照して文書を使うことができます。
2、CSS参照：
JPaginate公式はナビゲーションバーのスタイルを提供しています。自分でもかっこいいスタイルを書くことができます。

 
<link rel="stylesheet" type="text/css" href="style.css" /> 

3、index.php初期ページです。
最初の記事リストを表示する必要があります。コードは以下の通りです。

 
<div class="demo"> 
    <h4>Demo 3： Php+jQuery  AJAX     </h4> 
    <div id="pagetxt"> 
       
    </div> 
    <div id="demo"></div> 
</div> 

IDがpagetxtのDIVにPHPコードを追加します。

 
$query=$db->select("article","id,title,pubdate","cata=1 order by id desc limit 0,5"); 
while($row=$db->fetch_array($query)){ 
     $pubdate=date("Y-m-d",$row[pubdate]); 
     echo "<p><span>$pubdate</span><a href='view-blog-".$row[id].".html' target='_blank'> 
".$row[title]."</a></p>"; 

4、articale.phpコードです。
コードはindex.phpから提出されたページ番号を取得し、データベースを検索し、結果を出力します。コードは以下の通りです

 
include_once("common.php"); //          
 
$id=$_GET['id']; //     
$result = $db->select("article", "id", "cata=1"); 
$total = $db->db_num_rows($result); //     
 
$pagesize=5; //      
$page=ceil($total/$pagesize); //    
if(isset($id)){ 
   $startPage=($id-1)*$pagesize; 
   $query=$db->select("article","id,title,pubdate","cata=1 order by id desc limit $startPage,  
$pagesize"); 
   while($row=$db->fetch_array($query)){ 
     $pubdate=date("Y-m-d",$row[pubdate]); 
     echo "<p><span>$pubdate</span><a href='view-blog-".$row[id].".html' target='_blank'> 
".$row[title]."</a></p>"; //       
   } 
} 

本文はオリジナルの文章で、hello weba.comと作者は著作権を持っています。もし転載するなら、hello weba.comから来たと明記してください。