用ajax写分页查询-----2017-05-17
要写分页，首先你得清楚，一页你想显示多少条信息?如何计算总共显示的页数？
先说一下思路：
（1）从数据库读取数据，以chenai表为例，读取所有留言信息。并能够实现输入发送者，可以查询该发送者的留言总数。
（2）计算分页信息，此处，以每页显示5条信息为例。分页列表（如图）以当前页为中心，向前显示2条，向后显示2条。
（3）给每个分页列表添加对应的点击事件。
（4）能够实现分页后，添加查询分页功能。
现实效果图：
第一步：引入 jquery文件和bootstrap文件。（因为表格和分页均是用的bootstrap）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入bootstrap的css文件-->
<link type="text/css" rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<!--引入js包-->
<script src="../jquery-3.2.0.js"></script>
<!--引入bootstrap的js文件-->
<script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<style type="text/css">
/*给当前页添加特殊样式*/
.dqy{
font-weight: bolder;
}
</style>
</head>
第二步：从数据库读取数据
<body>
<h1 style="text-align: center;">分页查询</h1>
<div><input type="text" id="send"/><input type="button" id="chaxun" value="查询"/></div>
<!--用table显示留言信息-->
<table class="table table-striped">
<thead>
<tr>
<th>代号</th>
<th>发送者</th>
<th>接收者</th>
<th>时间</th>
<th>留言信息</th>
</tr>
</thead>
<tbody id="nr">
</tbody>
</table>
<!--造一个div显示分页信息-->
<div>
<ul class="pagination xinxi">
</ul>
</div>
</body>
</html>
第三步：写分页信息
（1）造方法
<script type="text/javascript">
//定义当前页，默认为1，不能为0
var page = 1;
//定义每一页显示多少条留言信息
var num = 5;
//造一个方法加载数据
Load();
//造一个方法加载分页信息
LoadFenYe();
（2）写方法
function Load(){
var send=$("#send").val();
$.ajax({
url:"chuli.php",
data:{page:page,num:num,sender:send},
type:"POST",
dataType:"JSON",
success:function(data){
//因为要返回json数据，所以更改DB.class.php类文件,使其返回json数据
var str ="";
//json遍历方式
for(var k in data)
// alert(data[k].Ids);
{
str = str+"<tr><td>"+data[k].Ids+"</td><td>"+data[k].Sender+"</td><td>"+data[k].Receiver+"</td><td>"+data[k].Times+"</td><td>"+data[k].Comment+"</td></tr>";
}
$("#nr").html(str);
}
});
}
//加载分页的方法
function LoadFenYe(){
//定义一个变量，用来放所有的分页信息，默认为空
var s ="";
var send=$("#send").val();
//加载上一页
s = "<span id='prev'>前一页</span>";
//加载中间的数字
var zts=0; //总的留言条数为0条
$.ajax({
async:false, //必须取消异步，不然总条数为0，总页数也为0
url:"tiaoshu-cl.php",
data:{sender:send},
type:"POST",
dataType:"TEXT",
success:function(data){
zts=data;
}
});
//总页数为总条数除以每一页显示的条数，如果为小数则向上取整
var zys = Math.ceil(zts/num);
//已经知道总的页数后，开始显示分页信息
page = parseInt(page); //转一下整型
// 当前页开始，向前显示2页，向后显示两页
for (var i = page-2;i < page+3;i++)
{
//注意i的范围
if(i>0 && i<=zys){
//如果i等于当前页，样式会不一样
if (i==page){
s=s+"<span ys='"+i+"' class='dqy'>"+i+"</span>"; //当前页
}
else{
s=s+"<span ys='"+i+"' class='qty'>"+i+"</span>"; //其他页
}
}
}
//加载后一页
s = s +"<span id='next'>后一页</span>";
s = "<li>"+s+"</li>";
$(".xinxi").html(s);
第四步：添加点击事件
//给前一页加点击事件
$("#prev").click(function(){
page = parseInt(page);
if(page>1)
{
page--;
}
//重新加载数据
Load();
LoadFenYe();
})
//给中间页面添加点击事件
$(".qty").click(function(){
page=parseInt($(this).attr("ys")); //取自定义的属性值
Load();
LoadFenYe();
})
//给后一页加点击事件
$("#next").click(function(){
page = parseInt(page);
if(page<zys)
{
page++;
}
//重新加载数据
Load();
LoadFenYe();
})
} //这是分页方法的另一半花括号
第五步：实现查询分页
$("#chaxun").click(function(){
Load();
LoadFenYe();
})
chuli.php页面
<?php
$page=$_POST["page"];
$num = $_POST["num"];
$sender = $_POST["sender"];
require "../DB.class.php";
$db = new DB();
$tgs = ($page-1)*$num;//跳过的条数
$sql = "select * from chenai where Sender like '%{$sender}%' limit {$tgs},{$num}";
echo $db->jsonquery($sql);
?>
tiaoshu-cl.php页面
<?php
$sender = $_POST["sender"];
require "../DB.class.php";
$db = new DB();
$sql = "select count(*) from chenai where Sender like '%{$sender}%'";
echo $db->strquery($sql);
?>
用ajax写分页查询-----2017-05-17的更多相关文章
- Ajax写分页查询（实现不刷新页面）
获取数据库中大量的信息显示在页面上,必然要使用到分页查询: 若不使用Ajax,而是用其他的方法,肯定是要刷新页面的,用户体检很不好, 所以最好使用Ajax的方法写分页查询: 1.先来找一张数据很多的表 ...
- 如何用ajax写分页查询（以留言信息为例）-----2017-05-17
要写分页,首先你得清楚,一页你想显示多少条信息?如何计算总共显示的页数? 先说一下思路: (1)从数据库读取数据,以chenai表为例,读取所有留言信息.并能够实现输入发送者,可以查询该发送者的留言总 ...
- 2018.2.28 PHP中使用jQuery+Ajax实现分页查询多功能如何操作
PHP中使用jQuery+Ajax实现分页查询多功能如何操作 1.首先做主页Ajax_pag.php 代码如下 <!DOCTYPE html> <html> <head& ...
- ajax的分页查询（不刷新页面）
既然是分页查询,那么就要有张数据很多的表,可以让它进行分页显示,用普通的方法进行分页查询必然是要刷新页面的,这里要实现不刷新页面进行分页显示数据,就要用到ajax方式.进行编写代码 (1)先写个显示数 ...
- ajax的分页查询
(1)先写个显示数据的页面,分页查询需要那几个部分呢? 1.首先是查询的文本框输入,还有查询按钮,那么就开始写代码吧 1 2 3 4 <div> <input type=" ...
- PHP中使用jQuery+Ajax实现分页查询多功能操作
1.首先做主页面Ajax_pag.php 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UT ...
- java,jq,ajax写分页
1.先写好html基础样式 我懒得去写css样式233,能看就行 <style> #page { width: 20px; } </style> <table> & ...
- 2017/05/17 java 基础 随笔
- Oracle ROWNUM用法和分页查询总结（转）
[转载] Oracle的分页查询语句基本上可以按照本文给出的格式来进行套用. Oracle分页查询格式(一):http://yangtingkun.itpub.net/post/468/100278 ...
随机推荐
- 数据库DML操作（DCL了解）
DQL:SELECT * FROM 表名DML(数据操作语言,它是对表记录的操作(增.删.改)!)1. 插入数据* INTERT INTO 表名(列名1,列名2, ...) VALUES(列值1, 列 ...
- cephfs创建及挂载
Ceph 文件系统( Ceph FS )是个 POSIX 兼容的文件系统,它使用 Ceph 存储集群来存储数据.Ceph 文件系统要求 Ceph 存储集群内至少有一个 Ceph 元数据服务器. 1.添 ...
- C语言 动态数组实现
一.概述 C语言是不能直接定义动态数组的,数组必须在初始化时确定长度. 如果要在程序运行时才确定数组的长度,就需要在运行的时候,自己去向系统申请一块内存用动态内存分配实现动态数组. 二.动态内存分配函 ...
- 实现高效的GPRS驱动程序
1. 引言 用过几款GPRS模块,也从淘宝上买过多个GPRS模块,一般的都会送一个驱动程序和使用demo,但是代码质量都较低. 回头看了下几年前使用的GPRS代码,从今天的角度来看,也就是买模块赠送一 ...
- vim中文帮助文档安装
vim自带的帮助手册是英文的, 对平时编程的人来说没有多大阅读困难,在何况还有"星级译王"呢, 但是我猜和我一样连英语四级都愁的大有人,可偏偏就有一帮好心人人将其翻译成了中文, 可 ...
- MongoDB基础教程系列--第七篇 MongoDB 聚合管道
在讲解聚合管道(Aggregation Pipeline)之前,我们先介绍一下 MongoDB 的聚合功能,聚合操作主要用于对数据的批量处理,往往将记录按条件分组以后,然后再进行一系列操作,例如,求最 ...
- js alert(“”）弹框 自定义样式
首先用css渲染一个样式 #msg{ height: 2rem; text-align: center; position: fixed; top: 50%; margin-top: -1rem; l ...
- oracle表空间扩容
oracle在使用中会发现,表空间不足的情况:以下介绍了如何1.查询表空间使用率.剩余量:2.如何扩展表空间容量: 1.表空间容量指标查询 SELECT TABLESPACE_NAME "表 ...
- VUE进阶(路由等)
初级教程:http://www.cnblogs.com/dmcl/p/6137469.html VUE进阶 自定义指令 http://cn.vuejs.org/v2/guide/custom-dire ...
- OC 常见面试题以及答案
一. #improt 和include区别?@class? 1.include 主要用用来引用C 文件 import 主要引用OC 头文件 import 确保一个文件只能被导入一次 避免了交叉编 ...