展示页面：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. 使用Django REST框架创建一个简单的Api

    Create a Simple API Using Django REST Framework in Python WHAT IS AN API API stands for application ...

  2. 联合CRF和字典学习的自顶向下的视觉显著性-全文解读

    top-down visual saliency via joint CRF anddictionary learning 自顶向下的视觉显著性是使用目标对象的可判别表示和一个降低搜索空间的概率图来进 ...

  3. Java中调用存储过程

    dao层: import java.util.Map; public interface AppGthdDao { public String gthd(Map map); } mapper层 < ...

  4. microbit之mpython的API

    附录:常用API函数汇总 一.显示 display.scroll("Hello, World!") 在micro:bit点阵上滚动显示Hello, World!,其中Hello, ...

  5. 想让自己的项目6666，可是 Chrome 不答应！

    读万卷书,行万里路!有的技能可以从书里学会,有的技能却需要在实战中打怪升级慢慢掌握,今天就来和大家聊一个很多小伙伴经常遇到的问题. 缘起 有人向松哥反映,在搭建微服务分布式配置中心 Spring Cl ...

  6. API管理之YApi实现前后端高度分离

    全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/11972789.html,多谢,=.=~ 背景描述   前后端分离已成为互联网项目开发的业界标准使 ...

  7. Mysql系列（十二）—— 索引下推优化

    索引条件下推(ICP)是对MySQL使用索引从表中检索行的情况的优化.如果没有ICP,存储引擎会遍历索引以查找基表中的行,并将它们返回给MySQL服务器,该服务器会评估WHERE行的条件.启用ICP后 ...

  8. java报错 pom.xml第一行报"org.apache.maven.archiver.MavenArchiver.getManifest(org.apache.maven.project...

    https://www.cnblogs.com/appium/p/11168441.html 新建Maven项目时,每个pom文件第一行都报错. 一.问题分析 原因就是你的maven的配置文件不是最新 ...

  9. oracle 获取表\视图的列名

     select COLUMN_NAME FROM user_col_comments WHERE TABLE_NAME='视图名'  select COLUMN_NAME from all_tab_c ...

  10. 完美转发（perfect forwarding）、universal reference、引用折叠（collasping）

    首先要分清: C++里的值只有两种值:左值.右值.—— 其本质应该是内存中存储的值/instance分两种:一种是持久的,一种是“短暂的” 也只有两种引用: 左值引用.右值引用. ——引用,就是这个内 ...