当前位置：首页 - PHP编程技巧 - 正文
Pear::Pager和AJAX的整合应用
发布时间: 2008-4-16 10:23　　作者: volcano 　　信息来源: ooso.net

作为一个PHP开发人员来说，大概很让人受用的一个东东就是Pear的类库了。我们知道，Pear::Pager是专门处理分页的，而Pear::HTML_AJAX则是Ajax应用的一些类库。但是Pager也不仅仅是只能用于html的分页链接，它已经为比超女还红的Ajax做好了准备，下面看看这两个包如何整合应用。

Pager and Javascript

现在走出第一步，Pager已经能够构建出javascript的链接了，和Ajax整合，理论上应该也是能够实现的，下面是Pager和javascript分页的一个例子：

PLAIN TEXT
PHP:
  1. require_once 'Pager/Pager.php';
  2. $data = range(1, 100); //an array of data to paginate
  3. $pager_params = array(
  4.     'mode'     => 'Sliding',
  5.     'append'   => false,  //don't append the GET parameters to the url
  6.     'path'     => '',
  7.     'fileName' => 'javascript:revealDiv(%d)',  //Pager replaces "%d" with the page number...
  8.     'perPage'  => 10, //show 10 items per page
  9.     'delta'    => 5,
  10.     'itemData' => $data,
  11. );
  12. $pager = & Pager::factory($pager_params);
  13. $n_pages = $pager->numPages();
  14. $links = $pager->getLinks();
  15. ?>
  16. <html>
  17. <head>
  18.     <script type="text/javascript" language="javascript">
  19.     var n_pages = <?php echo $n_pages ?>;
  20.     function revealDiv(n)
  21.     {
  22.         for (var count = 1; count <= n_pages; count++) {
  23.           document.getElementById("page"+count).style.display = 'none';
  24.         }
  25.         document.getElementById("page"+n).style.display = 'block';
  26.     }
  27.     </script>
  28.     <style type="text/css">
  29.     div.page {
  30.       background: #FFFF99;
  31.       border-top: 1px solid #FFBF99;
  32.       border-bottom: 1px solid #FFBF99;
  33.     }
  34.     </style>
  35. </head>
  36. <body>
  37. <h1>PEAR::Pager example with JavaScript</h1>
  38. <?php echo $links['pages']; ?>
  39. <hr />
  40. <?php
  41. for ($i=1; $i <= $n_pages; ++$i) {
  42.     echo '<div class="page" id="page'.$i.'">';
  43.     echo '<h2>Page '.$i.'</h2>';
  44.     foreach ($pager->getPageData($i) as $item) {
  45.         echo 'Item '.$item.'<br />';
  46.     }
  47.     echo '</div>';
  48. }
  49. ?>
  50. <hr />
  51. <script type="text/javascript" language="javascript">
  52. revealDiv(1);
  53. </script>
  54. </body>
  55. </html>

例子中把分页的所有数据放入一个div标签，定义了两个比较重要的参数就是path（为空）和fileName,fileName原本应该是链接的文件名，但是这里用javascript替换了。

Ajax上阵

这个例子包括三个文件page.html,server.php,testdata.php

  • page.html

    用动态javascript--server.php来处理数据，调用HTML_AJAX.replace('target', 'testdata.php')来替换id为target这个div的内容。

    PLAIN TEXT
    PHP:
    1. <html>
    2. <body>
    3. <h1>PEAR::Pager example with AJAX</h1>
    4.  
    5. <script type="text/javascript" src="server.php?client=all"></script>
    6.  
    7. <div id="target">I'm the target</div>

    9. <script type="text/javascript">
    10.     HTML_AJAX.replace('target', 'testdata.php');
    11. </script>

    13. </body>
    14. </html>
  • testdata.php

    这是个很简单的php程序，取到分页数据并输出html

    PLAIN TEXT
    PHP:
    1. <?php
    2. require_once 'Pager/Pager.php';
    3. $data = range(1, 100); //an array of data to paginate
    4. $pager_params = array(
    5.     'mode'     => 'Sliding',
    6.     'append'   => false,  //don't append the GET parameters to the url
    7.     'path'     => '',
    8.     'fileName' => 'javascript:HTML_AJAX.replace(\'target\',\'testdata.php?pageID=%d\');',  //Pager replaces "%d" with the page number...
    9.     'perPage'  => 10, //show 10 items per page
    10.     'delta'    => 1,
    11.     'itemData' => $data,
    12. );
    13. $pager = & Pager::factory($pager_params);
    14. $n_pages = $pager->numPages();
    15. $links = $pager->getLinks();
    16. echo '<p>This container is loaded with an AJAX call</p>';
    17. echo '<p><span class="datetime">DateTime: '. date('Y-m-d H:i:s') .'</span></p>';
    18. echo '<h3>Page '. $pager->getCurrentPageId() .'</h3>';
    19. foreach ($pager->getPageData() as $item) {
    20.     echo 'Item '. $item .'<br />';
    21. }
    22. echo '<hr />'.$pager->links;
    23. ?>
  • 最后，贴上幕后工作者server.php的代码

    用HTML_AJAX_Server来处理ajax这些烦心事吧

    PLAIN TEXT
    PHP:
    1. <?php
    2. include 'HTML/AJAX/Server.php';
    3.  
    4. $server = new HTML_AJAX_Server();
    5. $server->handleRequest();
    6. ?>

    web 2.0, Ajax的趋势图

    时下的web 2.0和Ajax概念正是如火如荼，且不论Ajax这东东到底是不是炒作的产物，就实际应用来说，Ajax在某些场合的确是顶好用而且看上去挺酷.

    蓝的是web 2.0,红的是Ajax
    web 2.0,ajax

    参考文档

    http://www.alberton.info/pear_pager_tutorial_javascript_navigation.html

    作者: volcano 发表于10月 23, 2006 at 7:53 am

    版权信息: 可以任意转载, 转载时请务必以超链接形式标明文章原始出处和作者信息及此声明

    • 查看评论>>　发表评论
    评分:
    内容:
    验证: