使用AJAX实现分页
本文实例为大家分享了AJAX实现分页展示的具体代码，供大家参考，具体内容如下
Fenye.html
<!DOCTYPE html>
<html>
<head>
<title>分页</title>
</head>
<script type="text/javascript">
/**
* AJAX
* 1.创建ajax对象
* 2.建立连接
* 3.判断ajax准备状态及状态码
* 4.发送请求
*/
function showList(pageNow){
//创建ajax对象
var xmlHttp = new XMLHttpRequest();
//建立连接
xmlHttp.open('get','./AJAX_Fenye.php?pageNow='+pageNow);
//判断ajax准备状态及状态码
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
//alert(xmlHttp.readyState);
document.getElementById('result').innerHTML = xmlHttp.responseText;
}
}
//发送请求
xmlHttp.send(null);
}
//默认显示第1页
window.onload = function(){
showList(1);
}
</script>
<body>
<input type="text">
<div id="result">
<!-- 此处显示信息！ -->
</div>
</body>
</html>
Fenye.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX分页</title>
</head>
<body>
<?php
//以下php代码可封装调用，参数为pageNow
//链接数据库
@mysql_connect('localhost','root','');
@mysql_select_db('empmanage');
@mysql_query('set name utf8');
//获取总记录数
$rs = mysql_query('select count(*) from emp');
$rows = mysql_fetch_row($rs);
$recordCount = $rows[0];
//每页显示多少条pageSize
$pageSize = 5;
//总页数 = 总记录/每页显示多少
$pageCount=ceil($recordCount/$pageSize);
//获取当前页 三元运算 若不存在pageNow则默认显示第1页
$pageNow = isset($_GET['pageNow'])? $_GET['pageNow']:1;
if ($pageNow < 1) {
$pageNow = 1;
}elseif ($pageNow > $pageCount) {
$pageNow = $pageCount;
}
//起始位置 每页从第几条数据显示
$pageStart = ($pageNow-1)*$pageSize;
//从哪条开始显示，限制每页显示几条
$sql = "select * from emp limit $pageStart,$pageSize";
//链接数据库
$rs = mysql_query($sql);
//以上php代码可封装调用，参数为pageNow 返回查询到的数据$rs
?>
<table bordercolor="green" border="1">
<tr>
<th>ID</th>
<th>姓名</th>
<th>邮箱</th>
<th>等级</th>
</tr>
<?php
//循环取出数据
while ($rows = mysql_fetch_assoc($rs)) {
echo "
<tr>
<td>{$rows['id']}</td>
<td>{$rows['name']}</td>
<td>{$rows['email']}</td>
<td>{$rows['level']}</td>
</tr>
";
}
?>
<tr>
<td colspan='4'>
<?php
//分页页码 调用js中的showList()方法 此处$i=$pageNow
for ($i=1; $i <= $pageCount; $i++) {
echo "<a href = 'javascript:void(0)' onclick = 'showList($i)'>{$i}</a> ";
}
?>
</td>
</tr>
</table>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
php,ajax实现分页
自己总结了些屁经验 1.用ajax post数据到后台页面后,接着要重新连接数据库,别以为用之前的session连接过就可以了 2.为了处理返回乱码的问题,我添加了header("Content-Type:text/html;charset=GB2312");就可以正常显示了,后来在firefox下检验,却提示我下载这个网页,上网搜了不少资料,得到一个模糊的认识就是网页代码有语法错误,firefox为了安全起见不会直接显示而是提示下载,我重新检查了刚才那条语句,发现自己多写了个&quo
-
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
原项目地址:http://plugins.jquery.com/project/pagination版本:v1.2源文件下载:英文原版 或中文翻译修改版 一.相关demo 基本demo页面 Ajax demo页面 参数可编辑demo页面二.简介与说明 此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢. 原插件CSS不太合理,使用浮动,故无法方便实现左右方向的定位,且未清除浮动,在中文修改版中我对其进行了优化,使其支持tex
-
使用PHP+JQuery+Ajax分页的实现
为了锻炼下JQuery,决定自己动手写写分页 最终的效果如图: 点击某个字母后,下方显示以该字母为首字母的所有词语: 分页显示,每页显示15个词语,每组页码有20个,1-20/20-40--- 首先是在PHP文件中的分页Pager的相关代码 复制代码 代码如下: public function searchWordsByInitial() { //从AJAX发出的URL中获得参数:用户点击的字母和点击的页码 $initial = htmlenti
-
JQuery+Ajax无刷新分页的实例代码
先看效果图: 实现原理很简单,使用了jquery.pagination这个插件,每当点击页码时异步去服务器去取该页的数据,简单介绍如下: 一.数据库表结构:很简单 就四个字段 分别是News_id News_title News_time News_readtimes 二.前台页面代码: 复制代码 代码如下: <head runat="server"> <title>JQuery无刷新分页</title> <link hre
-
jQuery DataTables插件自定义Ajax分页实例解析
一.问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分类效果. 后端的分页接口已经写好了,不涉及条件查询,需要传入页码(pageNo)和页面显示数据条数(pageSize),显示相应页的显示记录,且不能修改后端接口. 二.分析 先来分析下分页实现. 一是后端分页:这种情况下,在后端很容易实现,在官网上有示例,不多说明. 二是前端分页:前端分页也是支持的,不过需要一次把所有数据都获取到才可以. 看到这里,问题来了.由于后端在目前的情况下是更改不
-
Ajax读取数据之分页显示篇实现代码
我觉得还是有必要把我的ajax分页呈现给大家．我先讲一下这个ajax分页的实现核心,然后我们再看实例效果．所谓的ajax分页与传统的数据分页,在服务端的代码基本上是一样的．我们主要做的是使用ajax在不刷新的情况下,将请求的页码,和每页要显示的条数发送给服务端的处理网页．大家点击这个网址就可以看到要请求的数据:"ajax_page.asp?action=read&pagecount=3 & current_page=1" 在这段URL里,pagecount代表每页要显示
-
基于Jquery+Ajax+Json的高效分页实现代码
如果说您没用过这些东东的话,我相信看完这篇博文会对您有帮助的,,如果有任何问题不懂或者有bug没问题,欢迎随时联系我, 同时也欢迎高手多给点意见,我不建议在喷子中成长. 本人QQ:364175837 前言 相信很多朋友都用过,Jquery的分页插件,我之前就用的jquery.paper这个,如果有兴趣可以留下QQ,我发份简单的实例源码给您. 该代码是晚上匆忙中完成的,所以没怎么优化,但是主要作为实例来结合这些知识的一个综合运用.好了废话不多说,直接上代码. vs2010+sql2005expre
-
JS+Ajax+Jquery实现页面无刷新分页以及分组 超强的实现第1/2页
复制代码 代码如下: <%@ Page language="c#" Codebehind="GroupText.aspx.cs" AutoEventWireup="false" Inherits="test1.GroupText" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <HTML&g
-
php+ajax实现无刷新分页的方法
本文实例讲述了php+ajax实现无刷新分页的方法.分享给大家供大家参考.具体实现方法如下: 这是一款基于原生态的php +js +ajax 的分页程序实例,我们详细的从数据库创建到js,php,html页面的创建来告诉你如何实现ajax分页调用数据的方法. 具体步骤如下: 一.创建数据库 SQL语句如下: 复制代码 代码如下: CREATE TABLE `tb_user` ( `id` int(10) NOT NULL auto_increment, `username` varcha
-
用jQuery中的ajax分页实现代码
功能简介:主要功能就是分页显示数据了,可在配置文件中配置每页要显示的页码,可以做多条件联合查询,这里只是做一个简单的查询.欢迎拍砖,有问题的还望大虾们斧正哈.看看这个效果图,无刷新的噢!! 具体实现请看源码: 1.aspx页面 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxPage.aspx.cs" Inherits="Measur