要写分页，首先你得清楚，一页你想显示多少条信息?如何计算总共显示的页数？

先说一下思路：

（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的更多相关文章

  1. Ajax写分页查询（实现不刷新页面）

    获取数据库中大量的信息显示在页面上,必然要使用到分页查询: 若不使用Ajax,而是用其他的方法,肯定是要刷新页面的,用户体检很不好, 所以最好使用Ajax的方法写分页查询: 1.先来找一张数据很多的表 ...

  2. 用ajax写分页查询-----2017-05-17

    要写分页,首先你得清楚,一页你想显示多少条信息?如何计算总共显示的页数? 先说一下思路: (1)从数据库读取数据,以chenai表为例,读取所有留言信息.并能够实现输入发送者,可以查询该发送者的留言总 ...

  3. 2018.2.28 PHP中使用jQuery+Ajax实现分页查询多功能如何操作

    PHP中使用jQuery+Ajax实现分页查询多功能如何操作 1.首先做主页Ajax_pag.php 代码如下 <!DOCTYPE html> <html> <head& ...

  4. ajax的分页查询（不刷新页面）

    既然是分页查询,那么就要有张数据很多的表,可以让它进行分页显示,用普通的方法进行分页查询必然是要刷新页面的,这里要实现不刷新页面进行分页显示数据,就要用到ajax方式.进行编写代码 (1)先写个显示数 ...

  5. ajax的分页查询

    (1)先写个显示数据的页面,分页查询需要那几个部分呢? 1.首先是查询的文本框输入,还有查询按钮,那么就开始写代码吧 1 2 3 4 <div> <input type=" ...

  6. PHP中使用jQuery+Ajax实现分页查询多功能操作

    1.首先做主页面Ajax_pag.php 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UT ...

  7. java,jq,ajax写分页

    1.先写好html基础样式 我懒得去写css样式233,能看就行 <style> #page { width: 20px; } </style> <table> & ...

  8. Oracle ROWNUM用法和分页查询总结（转）

    [转载] Oracle的分页查询语句基本上可以按照本文给出的格式来进行套用. Oracle分页查询格式(一):http://yangtingkun.itpub.net/post/468/100278 ...

  9. Oracle的分页查询语句优化

    Oracle的分页查询语句基本上可以按照本文给出的格式来进行套用. (一)   分页查询格式: SELECT * FROM  ( SELECT A.*, ROWNUM RN  FROM (SELECT ...

随机推荐

  1. 【Oracle】服务器端监听配置

    一.静态监听 创建端口为1521的监听,静态注册,本机ip:192.168.10.2 [oracle@localhost ~]$ vi /u01/app/oracle/product/11.2.0/d ...

  2. SLAM:飞行机器人的参数解析-分类

    在水电站存在的山区,公路运输效率极低,盘山公路绕行消耗大量时间,使用飞行机器人进行运输是合适的选择. 实现一位长辈在山区飞行的愿望,任重而道远 常见飞行机器人的参数解析:解读飞行机器人的基本类型及技术 ...

  3. 安卓Queue的使用

    Queue的成员函数        add        增加一个元索                     如果队列已满,则抛出一个IIIegaISlabEepeplian异常       rem ...

  4. OpenCV中IplImage/CvMat/Mat转化关系

    原文链接:http://www.cnblogs.com/summerRQ/articles/2406109.html 如对内容和版权有何疑问,请拜访原作者或者通知本人. opencv中常见的与图像操作 ...

  5. Bootstrap 模态框（Modal）带参数传值实例

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 为了实现父窗体与其的交互,通常需要向其传值,实现 ...

  6. 微信小程序开发常用方法

    1.函数中访问data中的数据 _this.setData({ // 日历数据 signList: dataList, // 当前日期 todayDay: str }) 2.if判断 wx:if=&q ...

  7. 单链表每k个节点一组进行反转（最后不足k个也反转）

    一道面试题,第一次碰到这道题的时候 要求10分钟之内手写代码实现,当时没写出来,后来花点时间把过程梳理一遍,也挺简单的....... 思路就是在原来单链表反转的基础上,加几个控制参数,记录几个关键节点 ...

  8. Linux 僵尸进程如何处理

    Linux 允许进程查询内核以获得其父进程的 PID,或者其任何子进程的执行状态.例如,进程可以创建一个子进程来执行特定的任务,然后调用诸如 wait() 这样的一些库函数检查子进程是否终止.如果子进 ...

  9. eas之获取当前登陆信息

    public void getSystemInfo()    {        // SysContext工具类可获取当前登陆用户的信息,可根据需要进行调用.        // 举两例如下:     ...

  10. NOIP2009 T2 Hankson的趣味题

    传送门 题目描述 Hanks 博士是 BT (Bio-Tech,生物技术) 领域的知名专家,他的儿子名叫 Hankson.现在,刚刚放学回家的 Hankson 正在思考一个有趣的问题. 今天在课堂上, ...