jQuery+Ajax+PHP+Mysql实现分页显示数据

css

<style type="text/css">
        #loading{  
            position: absolute;  
            top: 200px;  
            left:400px;  
        }  
        #container .pagination ul li.inactive,  
        #container .pagination ul li.inactive:hover{  
            background-color:#ededed;  
            color:#bababa;  
            border:1px solid #bababa;  
            cursor: default;  
        }  
        #container .data ul li{  
            list-style: none;  
            margin: 5px 0 5px 50px;  
            color: #000;  
            font-size: 14px;  
        }  

        #container .pagination{  
            width: 1000px;  
            height: 25px;  
        }  
        #container .pagination ul li{  
            list-style: none;  
            float: left;  
            border: 1px solid #006699;  
            padding: 2px 6px 2px 6px;  
            margin: 0 3px 0 3px;  
            font-family: arial;  
            font-size: 14px;  
            color: #006699;  
            font-weight: bold;  
            background-color: #f2f2f2;  
        }  
        #container .pagination ul li:hover{  
            color: #fff;  
            background-color: #006699;  
            cursor: pointer;  
        }  
        .go_button{  
            background-color:#f2f2f2;border:1px solid #006699;color:#cc0000;padding:2px 6px 2px 6px;cursor:pointer;position:absolute;margin-top:-1px;  
        }  
        .total{  
            float:left;font-family:arial;color:#999;  
        }  
    </style>  

js

<script type="text/javascript">  
        $(document).ready(function(){  
            function loading_show(){  
                $('#loading').html("<img src='./loading.gif'/>").fadeIn('fast');  
            }
            
            function loading_hide(){  
                $('#loading').fadeOut('fast');  
            }
            
            function loadData(page){  
                loading_show();                      
                $.ajax({  
                    type: "POST",  
                    url: "load.php",  
                    data: "page="+page,  
                    success: function(msg){  
                        $("#container").ajaxComplete(function(event, request, settings){  
                            loading_hide();  
                            $("#container").html(msg);  
                        });  
                    }  
                });  
            }  
            loadData(1);  // For first time page load default results  
            $('#container .pagination li.active').live('click',function(){  
                var page = $(this).attr('p');  
                loadData(page); 
            });
                
            $('#go_btn').live('click',function(){  
                var page = parseInt($('.goto').val());  
                var no_of_pages = parseInt($('.total').attr('a'));  
                if(page != 0 && page <= no_of_pages){  
                    loadData(page);  
                }else{  
                    alert('Enter a PAGE between 1 and '+no_of_pages);  
                    $('.goto').val("").focus();  
                    return false;  
                } 
            });  
        });  
    </script>    

html

<script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script>
<div id="main">  
    <div id="loading"></div>  
    <div id="container">  
        <div class="data"></div>  
        <div class="pagination"></div>  
    </div>  
</div>

php

<?php  
    if($_POST['page']){  
        $page = $_POST['page'];      //当前页数
        $cur_page = $page;            //当前页数
        $page -= 1;                  
        $per_page = 10;  
        $previous_btn = true;  
        $next_btn = true;  
        $first_btn = true;  
        $last_btn = true; 
        $start = $page * $per_page;          //0 10 20 30 40   第一页：page = 1 
        //数据库配置信息
        define("HOST","localhost");    //主机名
        define("USER","root");        //账号
        define("PASS","root");        //密码
        define("DBNAME","waterfall");    //数据库名

        $link = mysql_connect("localhost","root","root")or die("连接数据库失败:".mysql_error());
        mysql_select_db("waterfall",$link);
        mysql_query("set NAMES 'utf8'");
                  
        $query_page_data = "SELECT * FROM `content` LIMIT $start, $per_page";  
        $result_page_data = mysql_query($query_page_data) or die('MySql Error' . mysql_error());  
        $msg = "";  
        while ($row = mysql_fetch_array($result_page_data)) {  
        $htmlmsg=htmlspecialchars($row['img']);  
            $msg .= "<li><b>" . $row['id'] . "</b> " . $htmlmsg . "</li>";  
        }  
        $msg = "<div class='data'><ul>" . $msg . "</ul></div>"; // 数据内容
          
          
        /* --------------------------------------------- */  
        $query_pag_num = "SELECT COUNT(*) AS count FROM content";  
        $result_pag_num = mysql_query($query_pag_num);  
        $row = mysql_fetch_array($result_pag_num);  
        $count = $row['count'];  
        $no_of_paginations = ceil($count / $per_page);  
          
        /* ---------------计算该循环的起始和endign值----------------------------------- */  
        if ($cur_page >= 7) {  
            $start_loop = $cur_page - 3;  
            if ($no_of_paginations > $cur_page + 3)  
                $end_loop = $cur_page + 3;  
            else if ($cur_page <= $no_of_paginations && $cur_page > $no_of_paginations - 6) {  
                $start_loop = $no_of_paginations - 6;  
                $end_loop = $no_of_paginations;  
            } else {  
                $end_loop = $no_of_paginations;  
            }  
        } else {  
            $start_loop = 1;  
            if ($no_of_paginations > 7)  
                $end_loop = 7;  
            else  
                $end_loop = $no_of_paginations;  
        }  
        /* ----------------------------------------------------------------------------------------------------------- */  
        $msg .= "<div class='pagination'><ul>";  
          
        // 为使第一个按钮
        if ($first_btn && $cur_page > 1) {  
            $msg .= "<li p='1' class='active'>First</li>";  
        } else if ($first_btn) {  
            $msg .= "<li p='1' class='inactive'>First</li>";  
        }  
          
        // 为使上一个按钮
        if ($previous_btn && $cur_page > 1) {  
            $pre = $cur_page - 1;  
            $msg .= "<li p='$pre' class='active'>Previous</li>";  
        } else if ($previous_btn) {  
            $msg .= "<li class='inactive'>Previous</li>";  
        }  
        for ($i = $start_loop; $i <= $end_loop; $i++) {  
          
            if ($cur_page == $i)  
                $msg .= "<li p='$i' style='color:#fff;background-color:#006699;' class='active'>{$i}</li>";  
            else  
                $msg .= "<li p='$i' class='active'>{$i}</li>";  
        }  
          
        // 为使下一个按钮
        if ($next_btn && $cur_page < $no_of_paginations) {  
            $nex = $cur_page + 1;  
            $msg .= "<li p='$nex' class='active'>Next</li>";  
        } else if ($next_btn) {  
            $msg .= "<li class='inactive'>Next</li>";  
        }  
          
        // 要启用结束按钮
        if ($last_btn && $cur_page < $no_of_paginations) {  
            $msg .= "<li p='$no_of_paginations' class='active'>Last</li>";  
        } else if ($last_btn) {  
            $msg .= "<li p='$no_of_paginations' class='inactive'>Last</li>";  
        }  
        $goto = "<input type='text' class='goto' size='1' style='float:left;margin-top:-1px;margin-left:60px;'/><input type='button' id='go_btn' class='go_button' value='Go'/>";  
        $total_string = "<span style='float:left;margin-left:40px;' class='total' a='$no_of_paginations'>Page <b>" . $cur_page . "</b> of <b>$no_of_paginations</b></span>";  
        $msg = $msg . "</ul>" . $goto . $total_string . "</div>";  // 为分页内容
        echo $msg;  
    }
?>