2012年5月10日 星期四

PHP 換頁 - 使用 Bootstrap 美化


大家好,我是一個將邁入社會的小姑娘,這幾天對PHP有了一點點小小的研究,那就是當你需要顯示大量資料時,畫面資料一大堆不知道該怎麼辦,此時可以用 PHP 換頁 的方式將資料分成好幾頁,以方便使用者閱讀。以下是我所適用的方法,希望對大家有所幫助~YA!!

以下程式碼基於 PHP 研習 中的實作練習下的資料換頁程式碼。

1. 

首先請至 Northwind for mysql 下載微軟範例資料庫北風 (northwind) 資料庫作為 PHP 換頁 的顯示資料,並將其匯入phpmyadmin中。




2. 

接著在config.php內設定資料庫環境。

<?php
    //======資料庫變數======//
    $cfgDB_HOST = 'localhost';     //資料庫所在主機位置
    $cfgDB_PORT ="3306";          //資料庫PORT(預設為3306)
    $cfgDB_USERNAME ="trista";    //資料庫帳號
    $cfgDB_PASSWORD ="trista";    //資料庫密碼
    $cfgDB_NAME = "northwind";    //使用的資料庫
?>


3. 

connect.php插入config.php用來連結資料庫,並下選擇資料庫的指令。

<?php
    // 建立資料庫連線
    function create_connection()
    {
        include 'config.php';
        $link = mysql_connect($cfgDB_HOST . ":" . $cfgDB_PORT, $cfgDB_USERNAME, $cfgDB_PASSWORD);
        return $link;
    }
    // 選擇資料庫
    function execute_sql($cfgDB_NAME, $sql, $link)
    {
        mysql_select_db($cfgDB_NAME, $link);
        $result = mysql_query($sql, $link);
        return $result;
    }
?>

4.

 
為了美化 PHP 換頁 整體畫面可至bootstrap 套用相關.css.js檔。
( 使用過程可參考:Bootstrap 於 Asp.net 的基本使用,如果還不會用,你們自己想辦法 )

5.

 
PHP 換頁範例中插入了connect.php連結資料庫,並以bootstrap美化畫面(我所使用的包含bootstrap.cssbootstrap-responsive.css),資料庫則是以北風資料庫做為範例。

<?php 
    // 資料庫連結
    require_once("connect.php");  
    $link=create_connection();  

    // 判斷Page傳來指定的頁數,以決定本頁顯示的資料
    if (isset($_POST['page']))
        $nowPage = $_POST['page'];
    
    if (!isset($nowPage)) 
        $nowPage = 1;

    // 判斷pern傳來的值,以決定顯示的資料筆數
    if (isset($_POST['pern']))
        $perNum = $_POST['pern'];
    
    if (!isset($perNum)) 
        $perNum = 5;  // 每頁顯示 5 筆(每次取5筆資料)
  
    //總筆數
    $sql = "select count(*) from nwsuppliers "; // 計算資料表 nwsuppliers 總筆數
    $rs = execute_sql("northwind", $sql, $link);  // 選擇資料庫 northwind
      list($totalNum) = mysql_fetch_row($rs);
  
    //若資料庫中無任何資料
    if($totalNum == 0)
    {
        echo "目前沒有資料";
        exit;
    }
  
    //開始起始指標
    $startId = ($nowPage - 1)* $perNum;
  
    //該頁實際顯示資料筆數目
    if(($startId+$perNum)>$totalNum) {
        $realPerNum = $totalNum - $startId;
    }else{
        $realPerNum = $perNum;
    }
  
    //總頁數
    if($totalNum % $perNum == 0){
        $totalPage = $totalNum / $perNum;
    }else{
        $totalPage = intval($totalNum / $perNum)+1;
    }
  
    //第一頁
    $firstPage=1;
  
    //最後一頁
    $lastPage = $totalPage;  
  
    //上一頁
    if($nowPage > 1){
        $forwardPage = $nowPage - 1;
        $firstPgLink = "<li><a href=\"javascript:chg(1, $perNum);\">第一頁</a></li>";
        $forPgLink = "<li><a href=\"javascript:chg($forwardPage, $perNum);\">《  </a></li>";
    }else{
        $forwardPage = false;
        $firstPgLink = "";
        $forPgLink = "";
    } 

    //下一頁
    if($nowPage < $totalPage){
        $nextPage = $nowPage + 1;
        $lastPgLink = "<li><a href=\"javascript:chg($lastPage, $perNum);\">最後一頁</a></li>";
        $nextPgLink = "<li><a href=\"javascript:chg($nextPage, $perNum);\"> 》 </a></li>";
    }else{  
        $nextPage =  false;
        $nextPgLink = "";
        $lastPgLink = "";
    }

?>
<!DOCTYPE html>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="css/bootstrap.css">
        <script language="JavaScript">
            function chg(np, n){
                document.sd.page.value=np;
                document.sd.pern.value=n;
                document.sd.submit();
            }
        </script>
</head>
<body>
    <form action="page.php" method="post" name="sd">
        <input type="hidden" name="page"> 
        <input type="hidden" name="pern">   
    </form>

    <table class="table table-striped table-bordered table-condensed" align='center' >
        <tr align='center' > 
            <td nowrap width='80' >CompanyName </td> 
            <td nowrap width='100' >ContactName</td>
            <td nowrap width='100' >ContactTitle</td>
        </tr>
        <?php
            //取出資料欄位CompanyName , ContactName , ContactTitle
            $sql = " select  CompanyName ,  ContactName,  ContactTitle  from nwsuppliers ";
            $rs = execute_sql("northwind", $sql, $link);

            //顯示資料
            for($i=$startId;$i<$startId+$realPerNum;$i++){
                mysql_data_seek($rs,$i);
                list( $CompanyName ,  $ContactName, $ContactTitle ) = mysql_fetch_row($rs);
        ?>
        <tr align='center'>
            <td nowrap ><?php echo $CompanyName ;?></td>
            <td nowrap ><?php echo $ContactName;?></td>
            <td nowrap ><?php echo $ContactTitle;?></td>    
        </tr>
        <?php } ?>
    </table>
  
    <form>
        <div class="pagination pagination-centered">
        <ul>
            <?php echo $firstPgLink; //第一頁 ?> 
            <?php echo $forPgLink; //上一頁 ?>
            <?php 
                $limitPage = 2; //顯示該頁+-頁碼數
                $minPage = $nowPage - $limitPage < 1 ? 1 : $nowPage - $limitPage; //顯示最小頁碼
                $maxPage = $nowPage + $limitPage > $totalPage ? $totalPage : $nowPage + $limitPage; //顯示最大頁碼

                //顯示換頁頁碼
                for($x = $minPage ; $x <= $maxPage ; $x++)
                {
                    $li = "<li>";
                    if ($x == $nowPage)
                        $li = "<li class=\"active\">";
                    $PgLink = $li . "<a href=\"javascript:chg($x, $perNum);\">$x</a></li>";
                    echo $PgLink;
                }
            ?>
   
            <?php echo $nextPgLink; //下一頁 ?>
            <?php echo $lastPgLink; //最後一頁 ?>
            <li><a>共<?php echo $totalPage; //總頁數 ?>頁</a></li>
            <li><a>(<?php echo $totalNum; //總資料筆數 ?> 筆資料)</a></li>
            <li><a style="border-style: none;">
            <?php 
                if($totalPage == 1){ 
                    echo "";
                }
                //快速換頁下拉式選單
                else{     
                    $pageFast="<select name=\"pageFast\" onChange=\"chg(this.form.pageFast.value, this.form.perNum.value);\" style=\"width: 90px;\" >";
                    for($i=1;$i<=$totalPage;$i++){
                        $pageFast.="<option value=\"".$i."\"";
                    if($i==$nowPage) $pageFast.=" selected";
                    $pageFast.=">第".$i."頁</option>";        
                }             
                $pageFast.="</select>";
                echo $pageFast;
                }
            ?>       
                </a>
            </li>
            <li><a style="border-style: none;">

            <?php
     
                if ($totalPage == 1)
                {
                    $pagePerNum = "<select name=\"perNum\" onChange=\"chg(1, this.form.perNum.value);\" style=\"width: 110px;\" >";
                }
                else
                {
                    $pagePerNum = "<select name=\"perNum\" onChange=\"chg(this.form.pageFast.value, this.form.perNum.value);\" style=\"width: 110px;\" >";
                }
                $pnList = array(5, 10, 20, 50, 100, 200); //每頁所顯示的資料筆數
                $pnCount = count($pnList);
    
                //下拉式顯示資料筆數
                for ($i = 0; $i < $pnCount; $i ++)
                {
                    $pagePerNum .= "<option value=\"" . $pnList[$i] . "\"";
                    if($pnList[$i] == $perNum) $pagePerNum .= " selected";
                    $pagePerNum .= ">顯示" . $pnList[$i] . "筆</option>";    
                }
     
                $pagePerNum .= "</select>";
     
                echo $pagePerNum;
            ?>      
                </a>
            </li>
        </ul>
        </div>    
    </form>   
</body>
</html>

完成圖

回 PHP 目錄
回首頁



2 則留言 :

Related Posts Plugin for WordPress, Blogger...