展示页面：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. Python-读取文件内容

    读取文件中的内容: with open('data.txt','r') as f: data_list = f.readlines()#每一行是一个字符串 data_list = [i.strip(' ...

  2. Rollup 配置 es6 环境

    前 为了可以使用新型的语法,顺便在兼容下老的浏览器,所以需要自己搭建个环境,目前我个人推崇使用 rollup,主要喜欢它的 tree-shake,打包出来的代码真的很简洁. 配置 rollup.con ...

  3. 补习系列(12)-springboot 与邮件发送【华为云技术分享】

    目录 一.邮件协议 关于数据传输 二.SpringBoot 与邮件 A. 添加依赖 B. 配置文件 C. 发送文本邮件 D.发送附件 E. 发送Html邮件 三.CID与图片 参考文档 一.邮件协议 ...

  4. golang 学习笔记 -- struct interface的使用

    一个 interface 类型定义了一个方法集做接口. 区分goalng的方法和函数 func go() { fmt.Println('go to home') } 这是函数 type car str ...

  5. 【mybatis】mybatis一条sql更新两张数据表，mybatis关联更新多张数据表

    示例sql: <update id="receipt" parameterType="com.pisen.cloud.luna.ms.security.code.b ...

  6. Java-Iterator遍历集合

    import java.util.ArrayList; import java.util.HashMap; import java.util.HashSet; import java.util.Ite ...

  7. C#与C++与互操作

    一.C#调用C++库 1.创建C++库 打开VisualStudio,创建一个C++工程,输入项目名称HelloWorldLib 确定,然后下一步.选择应用程序类型为DLL 单击完成,我们就创建好了一 ...

  8. .NET EF执行sql报数组超出了索引

    使用ef查询,写sql语句的 一般情况报数组超出了索引都认为是[i]里面的值超出了,但是执行sql报超出了索引,让人很蒙 在网上找了半天也没有结果,后来只能自己来解决了. 在异常里面能看到dbnull ...

  9. oracle中如何生成awr【性能调优】报告

    1.进入数据库 sqlplus / as sysdba 2.查看用户 show parameter db_name 3.开始压测后执行 exec DBMS_WORKLOAD_REPOSITORY.CR ...

  10. PIE截图方法的优化

    因为我们组的项目要通过截图获取数据,所以要经常使用截图工具,之前截图都是根据教程(https://www.cnblogs.com/PIESat/p/10243308.html)用的地图显示范围截图,而 ...