展示页面：index.html

<html>
<script>
function ajax_show() {
// 获取当前页
　　var page =1;
　　var xhr = new XMLHttpRequest();
　　xhr.open('get','getdata.php?p='+page)
　　xhr.send()
　　xhr.onreadystatechange=function(){
　　　　if (xhr.status==200&&xhr.readyState==4) {
　　　　　　// 把字符串转为json对象
　　　　　　data = JSON.parse(xhr.responseText)
　　　　　　jsondata = data['data']
　　　　　　pagenum = data['pagenum']
　　　　　　var str='<tr><td>ID</td><td>单位名称</td><td>用户名</td><td>手机号</td></tr>'
　　　　　　for (var i = 0; i < jsondata.length; i++) {
　　　　　　　　str=str+'<tr><td>'+jsondata[i].id+'</td><td>'+jsondata[i].company_name+'</td><td>'+jsondata[i].user+'</td><td>'+jsondata[i].tel+'</td></tr>'
　　　　　　}
　　　　　　document .getElementById('content').innerHTML=str
　　　　　　document .getElementById('end_page').value=pagenum
　　　　}
　　}
}

window.onload=function(){
　　ajax_show()
}

function ajax_go(type){
　　// 获取当前页
　　var page =parseInt(document.getElementById('current_page').value);
　　// 获取尾页
　　var pagenum= document.getElementById('end_page').value
　　if(type=='prev'){
　　// 上一页
　　　　var pages = page-1>1?page-1:1
　　}else if(type=='next'){
　　// 下一页
　　　　var pages = page+1>=pagenum?pagenum:page+1
　　}else if(type=='end'){
　　//尾页
　　　　var pages = pagenum;
　　}
　　var xhr = new XMLHttpRequest();
　　xhr.open('get','getdata.php?p='+pages)
　　xhr.send()
　　xhr.onreadystatechange=function(){
　　if (xhr.status==200&&xhr.readyState==4) {
　　　　var json = JSON.parse(xhr.responseText)
　　　　var jsondata = json['data']
　　　　var str='<tr><td>ID</td><td>单位名称</td><td>用户名</td><td>手机号</td></tr>'
　　　　for (var i = 0; i < jsondata.length; i++) {
　　　　str=str+'<tr><td>'+jsondata[i].id+'</td><td>'+jsondata[i].company_name+'</td><td>'+jsondata[i].user+'</td>　　<td>'+jsondata[i].tel+'</td></tr>'
　　}
　　　　document .getElementById('content').innerHTML=str
　　　　document .getElementById('current_page').value=pages
　　}
}
}

</script>
<body>
<table border="1">
<tbody id="content">

</tbody>
</table>
<div>
<input type="hidden" id="current_page" value='1'>
<input type="hidden" id="end_page" value="">
<span><button onclick="ajax_show()">首页</button></span>
<span><button onclick="ajax_go('prev')">上一页</button></span>
<span><button onclick="ajax_go('next')">下一页</button></span>
<span><button onclick="ajax_go('end')">尾页</button></span>
</div>
</body>
</html>

后台页面：getdata.php

<?php
$link = mysqli_connect('127.0.0.1', 'root', '123456', '12a');
mysqli_query($link, 'set names utf8');
// 接收页码
$p = isset($_GET['p']) ? $_GET['p'] : 1;
// 总条数：
$sql = "select * from company";
$res = mysqli_query($link, $sql);
$rows = mysqli_num_rows($res);

// 设置每页显示几条
$size = 3;
$start = ($p - 1) * $size;
$limitsql = "select * from company limit $start,$size";
$limit_res = mysqli_query($link, $limitsql);
while ($row = mysqli_fetch_assoc($limit_res)) {
$data[] = $row;
}
// 总页数
$end = ceil($rows / $size);

//返回 json数据

echo json_encode(['data' => $data, 'pagenum' => $end]);

效果图：

php+ajax无刷新分页原生ajax实现分页最简单完整实例-完整代码，的更多相关文章

  1. ajax 无刷新分页

    //ajax 无刷新分页1.前台要做的 滑动时 当前page+1,通过page ajax请求后台接口获取数据将数据进行拼装;2.后台要做的 做分页接口返回json数据前台判断触发请求条件: var p ...

  2. thinkphp ajax 无刷新分页效果的实现

    思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...

  3. 关于Ajax无刷新分页技术的一些研究 c#

    关于Ajax无刷新分页技术的一些研究 c# 小弟新手,求大神有更好的解决方案,指教下~ 以前做项目,用过GridView的刷新分页,也用过EasyUI的封装好的分页技术,最近在老项目的基础上加新功能, ...

  4. thinkphp下实现ajax无刷新分页

    1.前言 作为一名php程序员,我们开发网站主要就是为了客户从客户端进行体验,在这里,thinkphp框架自带的分页类是每次翻页都要刷新一下整个页面,这种翻页的用户体验显然是不太理想的,我们希望每次翻 ...

  5. ajax无刷新获取天气信息

    浏览器由于安全方面的问题,禁止ajax跨域请求其他网站的数据,但是可以再本地的服务器上获取其他服务器的信息,在通过ajax请求本地服务来实现: <?php header("conten ...

  6. Ajax.BeginForm()实现ajax无刷新提交

    1. 同时安装 Microsoft jQuery Unobtrusive ajax 和 jQuery Unobtrusive Ajax,如下图 安装完成之后多了如下的js库 2. 引用该js库 lay ...

  7. 移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传

    现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片 ...

  8. Ajax无刷新提交

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. DWZ框架Ajax无刷新表单提交处理流程

    DWZ框架Ajax无刷新表单提交处理流程是: 1.       ajax表单提交给服务器 2.       服务器返回一个固定格式json结构 3.       js会调函数根据这个json数据做相应 ...

  10. Thinkphp框架 -- ajax无刷新上传图片

    用Thinkphp框架做无刷新上传图片 视图层 View <!doctype html> <html lang="en"> <head> < ...

随机推荐

  1. Java 并发编程-不懂原理多吃亏（送书福利）

    作者 | 加多 关注阿里巴巴云原生公众号,后台回复关键字"并发",即可参与送书抽奖!** 导读:并发编程与 Java 中其他知识点相比较而言学习门槛较高,从而导致很多人望而却步.但 ...

  2. Spring Boot入门及第一个案例

    一:SpringBoot是什么 springboot是对spring的缺点进行改善和优化,约定大于配置  开箱即用  没有代码生成 也无需xml 文件配置   可以修改属性值来满足需求 1) Spri ...

  3. Flask高级

    关于Flask启动,和请求处理 #关于后端服务的启动,无非就是启动实现了WSGI协议的socket #关于flask启动的无非就是下面两段代码 #加载配置,创建Flask对象 app = Flask( ...

  4. Java学习：反射机制简介

    反射机制是什么 反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法: 对于任意一个对象,都能够调用它的任意一个方法和属性: 这种动态获取的信息以及动态调用对象的方法的功能称为ja ...

  5. Kafka学习笔记3--Kafka的生产者和消费者配置

    下载解压 kafka 后,在 kafka/config 下有 3 个配置文件与主题及其生产.消费相关. server.properties--服务端配置 producer.properties--生产 ...

  6. json时间格式化

    //格式化日期字符串 String.prototype.jsonDateFormat = function (format) { var date, timestamp, dtObj timestam ...

  7. 终于理解Macro： Tree-of-symbols ， 几个特殊标记符号

  8. python 中问题，包括某些库的问题

    *)TypeError: exceptions must derive from BaseException 原因是raise语句没有写好 raise('value must between 0 an ...

  9. PHP之面向对象(上)

    PHP 1,定义:动态交互的计算机语言,弱类型语言 静态交互  html  css   js 凡是动态交互的都需要服务器phpstudy 2,使用集成服务器phpstudy apache  服务器 m ...

  10. 安装Ubuntu linux

    (1)下载Ubuntu http://www.ubuntu.com/download/desktop (2)制作启动U盘 1. 启动Rufus: 2. 插入U盘: 3. Rufus会提示更新,以自动选 ...