展示页面：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. 【网络知识之二】HTTP协议

    HTTP协议(Hypertext Transfer Protocol,超文本传输协议),一种无状态的.应用层的.以请求/应答方式运行的协议,它使用可扩展的语义和自描述消息格式,与基于网络的超文本信息系 ...

  2. PHP命令执行php文件需要注意的问题

    PHP命令执行php文件需要注意的问题 require_once '/data/fewfawef/wwwroot/Public/queenchuli/common/mysql.php';里面必须要写绝 ...

  3. 在Mu-kittenbot中使用Robotbit固件

    首先,先下载安装支持robotbit扩展板的Mu: http://cdn.kittenbot.cn/mu/mu-kittenbot.exe 标准的3针插口,信号,正电,负电,可接市面的arduino模 ...

  4. WPF 高级篇 MVVM 附加属性

    原文:WPF 高级篇 MVVM 附加属性 WPF 特性之一 附加属性 在本文里实现文本框内容的验证 public class TextBoxHelper:DependencyObject { publ ...

  5. WPF 精修篇 属性动画

    原文:WPF 精修篇 属性动画 属性动画 是通过 Storyboard 来改变属性值 <Rectangle x:Name="rect" Width="200&quo ...

  6. delegate里的Invoke和BeginInvoke

    Invoke和BeginInvoke都是调用委托实体的方法,前者是同步调用,即它运行在主线程上,当Invode处理时间长时,会出现阻塞的情况,而BeginInvod是异步操作,它会从新开启一个线程,所 ...

  7. 基于Golang的逃逸分析（Language Mechanics On Escape Analysis）

    何为逃逸分析 在编译程序优化理论中,逃逸分析是一种确定指针动态范围的方法——分析在程序的哪些地方可以访问到指针.它涉及到指针分析和形状分析. 当一个变量(或对象)在子程序中被分配时,一个指向变量的指针 ...

  8. .net Redis分布式锁,Dictionary,ConcurrentDictionary 介绍

    1.背景 在计算机世界里,对于锁大家并不陌生,在现代所有的语言中几乎都提供了语言级别锁的实现,为什么我们的程序有时候会这么依赖锁呢?这个问题还是要从计算机的发展说起,随着计算机硬件的不断升级,多核cp ...

  9. shell公共函数functions

    checkpid:检查是否已存在pid,如果有一个存在,返回0(通过查看/proc目录) daemon:启动服务 killproc:杀死某个进程 pidfileofproc:寻找某个进程的pid pi ...

  10. ta和夏天一起来了

    目录 ta和夏天一起来了 上半年,过去的就让去过去,遗憾的也别再遗憾. 下半年,拥有的请好好珍惜,想要的请努力去追. ta和夏天一起来了 ​ 转眼结束了2019的上半年,在这个月末, 季度末, 周末, ...