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;
    }
?>