smartyテンプレートローカルキャッシュなしajax,jsonを組み合わせた静的ページング

26958 ワード

init.phpファイルはプロジェクトルートディレクトリの下にあり、smarty構成を定義します.
define("ROOT",dirname(str_replace("\\","/",__FILE__))); 

    //       ,          ,   __FILE__       ,

    //  __FILE__              ,            

    define("PATH",dirname($_SERVER["SCRIPT_FILENAME"]));

    //      ,      ,PATH   

    include ROOT."/libs/Smarty.class.php";

    //  smarty     

    $smarty=new Smarty;

    //   smarty   

    $smarty->template_dir=PATH."/tpls";

    //        

    $smarty->compile_dir=PATH."/coms";

    //        

    $smarty->cache_dir=PATH."/cache";

    //        

    $smarty->cache_lifttime=3600;

    //      

    $smarty->left_delimiter="<{";

    //      

    $smarty->right_delimiter="}>";

    //      

    $smarty->caching=true;

    //    

    $smarty->debugging=false;

    //    

index.phpはプロジェクトルートディレクトリの下にあるhomeディレクトリの下にあり、メインファイルであり、ページングを実現する
include "../init.php";

	//        smarty      init.php

	include "../config.inc.php";

	//              

	include ROOT."/model/mysql.inc.php";

	//         

	$num=5;

	//         

	$row=$pdo->query("select count(*) from fenye");

	$total=current($row->fetch(PDO::FETCH_NUM));

	//      ,    $total

	$totalpage=ceil($total/$num);

	//         

	if(isset($_GET['p'])){

		if($_GET['p']>$totalpage){

			$thispage=$totalpage;

		}elseif($_GET['p']<=1){

			$thispage=1;

		}else{

			$thispage=$_GET['p'];

		}

	}else{

		$thispage=1;

	}

	//     $thispage        

	$offset=($thispage-1)*$num;

	//  sql  limit  offset 

	$firstpage=1;

	//    page 

	$endpage=$totalpage;

	//    page 

	$prepage=$thispage>1?$thispage-1:1;

	//     page 

	$nextpage=$thispage<$totalpage?$thispage+1:$totalpage;

	//     page 

	$row=$pdo->query("select * from fenye limit $offset,$num");

	//  sql  

	$array=array();

	$td="<table id='ncache' border=1>";

	while($arr=$row->fetch(PDO::FETCH_ASSOC)){

		$td.="<tr>";

		$td.="<td>".$arr['newsID']."</td>";

		$td.="<td>".$arr['newsTitle']."</td>";

		$td.="<td>".$arr['newscontent']."</td>";

		$td.="</tr>";

		};

		$td.="</table>";

	//    js          



		$key="";

		$key.="<a href='".$_SERVER['PHP_SELF']."?p=1'  id='first'>  </a>";

		$key.="<a href='".$_SERVER['PHP_SELF']."?p=".$prepage."'  id='pre'>   </a>";

		$key.="<a href='".$_SERVER['PHP_SELF']."?p=".$nextpage."' id='next'>   </a>";

		$key.="<a href='".$_SERVER['PHP_SELF']."?p=".$endpage."' id='end'>  </a>";

		$key.="<input type='hidden' id='page' value=".$thispage.">";

	//      

	

	function smarty_ncache($params,$content,&$smarty){

			global $td;

			return $td;

	}

	//       ,  ajax  ,              ,

	//                 ,       



	

		$smarty->register_block("ncache","smarty_ncache",false);

		//               

		$smarty->assign("str",$key);

		$smarty->assign("News",$array);

		//            

	if(!isset($_GET['n'])){

		$smarty->display("news.tpl");

	}else{

		echo "{'td':\"{$td}\",'key':\"{$thispage}\"}";

	}

	//          ,  ajax    n ,         ,       ,

	//                      json    

	

	


 
テンプレートファイルでこのページで定義されたsmartyローカルキャッシュラベルでローカルデータをラップし、jsでページフッターの非表示inputボックスに格納されている現在のページ番号をリアルタイムで更新します.
 1 <!DOCTYPE HTML>

 2 <html>

 3     <head>

 4         <title>""</title>

 5         <meta http-equiv="content-type" content="text/html;charset=utf-8">

 6         <script type="text/javascript" src="/sfenye/jqueryui/jquery.js"></script>

 7     </head>

 8     <body>

 9             <{ncache}><!--       -->

10         <table border=1  id='ncache'>

11             <tr id><td>ID</td><td>TITLE</td><td>CONTENT</td></tr>

12             

13             <{section name=dis loop=$News}><!--                -->

14             

15                 <tr>   

16                     <td><{$News[dis].newsID}></td>

17                     <td><{$News[dis].newsTitle}></td>

18                     <td><{$News[dis].newscontent}></td>

19                 </tr> 

20             <{/section}> 

21             

22 

23             

24         </table>

25         <{/ncache}><!--       -->

26         <br>

27         <br>

28         <div id='fen'>

29         <{$str}>

30         </div>

31     </body>

32     

33     <script type="text/javascript">

34             $(function(){

35                 $("a").click(function(e){

36                     e.preventDefault();//         

37 

38                     thispage=Number($("#page").val());//       

39                     nextpage=thispage+1;

40                     prepage=thispage-1;

41                     firstpage=1;

42                     endpage=99;

43                     act=this.id;//                , id  

44                     switch (act){

45                         case 'first':

46                             sendpage=1;

47                             break;

48                         case 'pre':

49                             sendpage=prepage;

50                             break;

51                         case 'next':

52                             sendpage=nextpage;

53                             break;

54                         case 'end':

55                             sendpage=endpage;

56                             break; 

57                     }//            id    ajax   page 

58                     $.get("index.php?p="+sendpage+"&n=true",function(data){//  page ,     

59                          var  obj =  eval("("+data+")");//    json       

60                         $("#ncache").replaceWith(obj['td']);//            

61                         $("#page").val(obj['key']);//         input       

62                     })

63                  })

64             }) 

65     </script>

66 </html>

データベースファイルの設定はここに貼られていません.状況に応じて自分で設定すればいいです.