zoukankan      html  css  js  c++  java
  • ajax两个网页实现完美的 分页功能

    分页的首页

    <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
    <h1 align="center">武侠小说分页</h>
    <br/>
    <script src="jquery-1.4.2.min.js"></script>
    <script>
    var page='';
      function init(page){
      document.getElementById("tables").innerHTML='';
       var xhr;
       if(window.XMLHttpRequest){
     xhr = new XMLHttpRequest();
    }else if(window.ActiveXObject){
     xhr =new ActiveXObject("Microsoft.XMLHTTP")
    }
    var url="fenye.php";
     xhr.open("POST",url,true);
     xhr.onreadystatechange=callback;
     xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
     if(page){
     xhr.send("page="+page);
     }
     else {xhr.send("page=1");}
     var content;
     function callback(){
       if(xhr.readyState==4){
         if(xhr.status==200){
          var json =eval('('+xhr.responseText+')');
       //alert(xhr.responseText);
      var fenye=json.str;
     //  alert(fenye);
         document.getElementById('div').innerHTML=fenye;
      content="<th>ID</th><th>名称</th><th>作者</th><th>出版社</th><th>ISBN号</th><th>类型</th><th>价格</th>";
      for(var i=0;i<json.info.length;i++){
      content+="<tr><td>"+json.info[i].id+"</td><td>"+json.info[i].name+"</td><td>"+json.info[i].author+"</td><td>"+json.info[i].publisher+"</td><td>"+json.info[i].isbn+"</td><td>"+json.info[i].type+"</td><td>"+json.info[i].price+"</tr>";
      document.getElementById("tables").innerHTML=content;
      }
        // alert(fenye);
         }
       }
       }
     }
     
    </script>


    <body onLoad="init()">
     <h3 align="center">jquery实现$.ajax的分页</h3>
    <table id="tables" style=" 500px; height:100px; text-align:center" align="center" border="5" bordercolor="#FF6600">
    <th>ID</th><th>名称</th><th>作者</th><th>出版社</th><th>ISBN号</th><th>类型</th><th>价格</th>
    </table>
    <table align="center" style="margin-top:15px">
     <tr><td>
     <td style="colspan:3;height:20">
     <div id="div" style="position:absolute; left: 447px; top: 218px; 411px; height: 22px;"></div>
     </td>
    </tr>
    </table>
    <br />
    </body>

    分页的php精华代码

    <?php
        //命令模型层处理数据
      $link=mysql_connect('localhost','root','') or die("失败");
      mysql_select_db('books',$link) or die("连接数据库出错了!");
      //每页显示记录数
      $pagesize = 2;
      //求出总的记录数
      $sql = "select count(*) as total_rows from books";
      $result = mysql_query($sql);
      $total_rows = mysql_fetch_array($result);
      //求总共的页码数
      $pages = ceil($total_rows[0]/$pagesize);
      //当前第几页
      $page = $_POST['page'];
      $strtext = "当前第".$page."页"."总共".$pages."页"."共".$total_rows[0]."记录";
      //var_dump($str);
      //接下来,我要根据当前点击的页码求出对应的数据
      $offset = $pagesize*($page-1);
      $sql = "select * from books limit $offset,$pagesize";
      mysql_query("set names utf8");
            $res=mysql_query($sql);
      
       $rows=array();
      while($row=mysql_fetch_assoc($res)){
        $rows[]=$row;
       }
      $pageInfo = $rows;
      //echo json_encode($pageInfo);
      //var_dump($pageInfo);
      //将获得数据链接,后返回
      $first=1;
      $prev=$page-1;
      $next=$page+1;
      $last=$pages;
      
      //命令视图层显示数据
          $first_a = "<a onclick='init(".$first.")' href='#'><img src='3.jpg' width='50px;' height='20px;'/></a>";
      if($page>1){
       $prev_a = "<a onclick='init(".$prev.")' href='#'><img src='1.jpg' width='50px;' height='20px;'/></a>";
      }
      if($page<$pages){
       $next_a = "<a onclick='init(".$next.")' href='#'><img src='2.jpg' width='50px;' height='20px;'/></a>";
      }
      $last_a = "<a onclick='init(".$last.")' href='#'><img src='4.jpg' width='50px;' height='20px;'/></a>";
      @$str = $strtext.$first_a.$prev_a.$next_a.$last_a;
      //var_dump($str);
      $info = array('str'=>$str,'info'=>$pageInfo);
      echo json_encode($info);
      

  • 相关阅读:
    [BZOJ4869][洛谷P3747][六省联考2017]相逢是问候(线段树)
    [WC2014][BZOJ3435][洛谷P3920]紫荆花之恋(动态点分治+treap)
    JavaScript对象JQuery In Action
    每日一条SQL LEFT JOIN
    Div border 显示不出来的原因
    HTML列表标记:dl、dt、dd
    The Effective Executive 笔记 一
    c# 解析JSON的几种办法
    使用if else 容易犯的错
    每日一句SQL:内联视图
  • 原文地址:https://www.cnblogs.com/javawebsoa/p/3024913.html
Copyright © 2011-2022 走看看