展示页面：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. 利用Jenkins打包并远程部署SpringBoot应用

    本文Jenkins版本2.190.2,为19年11月最新 1.安装Jenkins.Git.Maven和JDK Jenkins安装参考:https://www.cnblogs.com/zhi-leaf/ ...

  2. Maven依赖以及项目创建

    目录: 1. Maven依赖.Eclipse中使用Maven.生命周期 1.1 Maven依赖 1.2 Eclipse中使用Maven 2. 依赖排除.通过Maven整合多个Maven 2.1 依赖排 ...

  3. linux写shell注意的问题

    linux写shell注意的问题一定要vi crontab.sh来写 ps:在windows系统中编辑过这个文件,就会出现类似的换行符 这样导致linux系统中运行sh报错 比如会出现$MQ字符 如果 ...

  4. Feign切换client到okhttp无法生效天坑！(附带发生的原因)

    提示:如果只看如何解决问题,请看文章的末尾如何解决这个问题 1. 场景描述 最近项目中使用了feign当做http请求工具来使用.相对于httpclient.resttemplate来说,fegin用 ...

  5. Spring Boot + Vue 前后端分离开发，权限管理的一点思路

    在传统的前后端不分的开发中,权限管理主要通过过滤器或者拦截器来进行(权限管理框架本身也是通过过滤器来实现功能),如果用户不具备某一个角色或者某一个权限,则无法访问某一个页面. 但是在前后端分离中,页面 ...

  6. Window应急响应（六）：NesMiner挖矿病毒

    0x00 前言 作为一个运维工程师,而非一个专业的病毒分析工程师,遇到了比较复杂的病毒怎么办?别怕,虽然对二进制不熟,但是依靠系统运维的经验,我们可以用自己的方式来解决它. 0x01 感染现象 1.向 ...

  7. 【IntelliJ IDEA】idea部署服务到Tomcat的工作原理

    参考地址: https://blog.csdn.net/qq_41116058/article/details/81435084 为什么idea部署服务到tomcat时候,一定要修改Applicati ...

  8. 来看一下Java中“-”与equeals的区别

    简介: == ==是比较两个变量的值,如果是基本数据类型,那么就是比较的基本数据的大小值 情况一 int a=1; int b=1; System.out.println(a==b); 以上图中:== ...

  9. EurekaClient自动装配及启动流程解析

    在上篇文章中,我们简单介绍了EurekaServer自动装配及启动流程解析,本篇文章则继续研究EurekaClient的相关代码 老规矩,先看spring.factories文件,其中引入了一个配置类 ...

  10. jQuery每秒刷新

    显示当前时间 setInterval( function getNowTime() { var nowTime = new Date(); var nowYear = nowTime.getFullY ...