zoukankan html css js c++ java

用ajax 写分页

主页代码：

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>无标题文档</title>
  6 <script src="jquery-1.11.2.min.js"></script>
  7 <style type="text/css">
  8 .dangqian{ background-color:#69F}
  9 </style>
 10 </head>
 11 
 12 <body>
 13 
 14 <div>
 15 <input type="text" id="key"  style="display:none;"/>
 16 <!--<input type="button" value="查询" id="chaxun" />
 17 --></div>
 18 
 19 <table width="100%" border="1" cellpadding="0" cellspacing="0">
 20     <tr>
 21         <td>代号</td>
 22         <td>名称</td>
 23         <td>父级代号</td>
 24     </tr>
 25     
 26     <tbody id="nr">
 27     
 28     
 29     
 30     </tbody>
 31     
 32 </table>
 33 
 34 <div id="xinxi">
 35 
 36 </div>
 37 
 38 </body>
 39 <script type="text/javascript">
 40 
 41 var page = 1; //当前页
 42 
 43 Load(); //加载数据
 44 LoadXinXi(); //加载分页信息
 45 
 46 //查询
 47 /*$("#chaxun").click(function(){
 48         page = 1;
 49         Load(); //加载数据
 50         LoadXinXi(); //加载分页信息
 51     })*/
 52 
 53 function Load()
 54 {
 55     var key = $("#key").val(); //查询条件
 56     
 57     $.ajax({
 58             url:"chuli.php",
 59             data:{page:page,key:key},
 60             type:"POST",
 61             dataType:"JSON",
 62             success: function(data){
 63                     var str = "";
 64                     for(var k in data)
 65                     {
 66                         str +="<tr><td>"+data[k].ruzhutime+"</td><td>"+data[k].roomid+"</td><td>"+data[k].yprice+"</td></tr>";
 67                     }
 68                     $("#nr").html(str);
 69                 }
 70         });
 71 }
 72 
 73 function LoadXinXi()
 74 {
 75     var str = "";
 76     var minys = 1;
 77     var maxys = 1;
 78     var key = $("#key").val();
 79     
 80     //查总页数
 81     $.ajax({
 82             async:false,
 83             url:"zys.php",
 84             data:{key:key},
 85             type:"POST",
 86             dataType:"TEXT",
 87             success: function(d){
 88                     maxys = d;
 89                 }
 90         });
 91     
 92     str += "<span>总共："+maxys+"页</span> &nbsp;";
 93     str += "<span id='prev'>上一页</span>";
 94     
 95     for(var i=page-2;i<page+3;i++)
 96     {
 97         if(i>=minys && i<=maxys)
 98         {
 99             if(i==page)
100             {
101                 str += "<span class='dangqian' bs='"+i+"'>"+i+"</span> &nbsp;";
102             }
103             else
104             {
105                 str += "<span class='list' bs='"+i+"'>"+i+"</span> &nbsp;";
106             }
107         
108         }
109     }
110      
111     str += "<span id='next'>下一页</span>"; 
112     
113     $("#xinxi").html(str);
114     
115     //给上一页添加点击事件
116     $("#prev").click(function(){
117             page = page-1;
118             if(page<1)
119             {
120                 page=1;
121             }
122             Load(); //加载数据
123             LoadXinXi(); //加载分页信息
124         })
125     //给下一页加点击事件
126     $("#next").click(function(){
127             page = page+1;
128             if(page>maxys)
129             {
130                 page=maxys;
131             }
132             Load(); //加载数据
133             LoadXinXi(); //加载分页信息
134         })
135     //给中间的列表加事件
136     $(".list").click(function(){
137             page = parseInt($(this).attr("bs"));
138             Load(); //加载数据
139             LoadXinXi(); //加载分页信息
140         })
141 }
142 
143 </script>
144 </html>

test.php

处理页面：

<?php
include("DBDA.php");
$db = new DBDA();

$page = $_POST["page"];
$key = $_POST["key"];
$num = 10;
$tiao = ($page-1)*$num;

$sql = "select * from ruzhu where ruzhutime like '%{$key}%' limit {$tiao},{$num}";

echo $db->JSONQuery($sql);

　　查总页数：

<?php
include("DBDA.php");
$db = new DBDA();

$key = $_POST["key"];
$num = 10;

$sql = "select count(*) from ruzhu where ruzhutime like '%{$key}%'";

$zts = $db->StrQuery($sql);

echo ceil($zts/$num);

　　效果如图：

查看全文

相关阅读:
用JavaScript 实现变速回到顶部
 导出数据到Excel
Jquery ajax调用webService,远程访问出错解决办法
 火狐和IE的window.event对象详解
 硬盘、U盘添加漂亮背景
 JS 获取当前日期时间(兼容IE FF)
Base64编码
 师生关系
 关于计算机导论的问题
 自我介绍

原文地址：https://www.cnblogs.com/bhmmlxieliming/p/6391811.html