<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>  

<script type="text/javascript">          $(document).ready(function(){              function loading_show(){                  $(‘#loading‘).html("<img src=http://www.mamicode.com/‘./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>    

<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      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=http://www.mamicode.com/‘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;      }?>