jQuery+Ajax+PHP+Mysql実現ページング表示データ

25260 ワード

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;  

    }

?>