使用JSON实现分页可直接用

Fenye.html

<!DOCTYPE html>
<html>
<head>
<title>JSON分页</title>
</head>
<body> <script type="text/javascript">
function getPageList(pageno){ var req=new XMLHttpRequest();
req.open('get','./JSON_Fenye.php?pageno='+pageno);
req.onreadystatechange=function(){
if(req.readyState==4 && req.status==200){ //将传来的字符串转化为对象
eval('var info='+req.responseText);
var str='<tr><th>ID</th><th>姓名</th><th>邮箱</th><th>等级</th></tr>'; //循环取出info对象中的数据
for(var i=0,n=info.length-1;i<n;i++){
str+='<tr><td>'+info[i].id+'</td><td>'+info[i].name+'</td><td>'+info[i].email+'</td><td>'+info[i].level+'</td></tr>';
} //分页链接
str+='<tr><td colspan="4" align="center">';
for(var i=1;i<=info[info.length-1];i++){ str+='<a href="javascript:void(0)" onclick="getPageList('+i+')">'+i+'</a>&nbsp;';
console.log(i);
}
str+='</td></tr>'; //把数据输出到浏览器
document.getElementById('result').innerHTML=str;
}
}
req.send(null);
} //默认显示第一页
window.onload=function(){
getPageList(1);
}
</script> <table id='result'></table>
</body>
</html>

Fenye.php

<?php 

/**
*JSON分页
*/ //链接数据库
@mysql_connect('localhost','root','');
@mysql_select_db('empmanage');
@mysql_query('set name utf8'); //获取总记录数
$rs = mysql_query('select count(*) from emp');
$rows = mysql_fetch_row($rs);
$recordCount = $rows[0]; //每页显示多少条pageSize
$pageSize = 5; //总页数 = 总记录/每页显示多少
$pageCount=ceil($recordCount/$pageSize); //获取当前页 三元运算 若不存在pageNow则默认显示第1页
$pageNow = isset($_GET['pageNow'])? $_GET['pageNow']:1; if ($pageNow < 1) {
$pageNow = 1;
}elseif ($pageNow > $pageCount) {
$pageNow = $pageCount;
} //起始位置 每页从第几条数据显示
$pageStart = ($pageNow-1)*$pageSize; //从哪条开始显示,限制每页显示几条
$sql = "select * from emp limit $pageStart,$pageSize"; //链接数据库
$rs = mysql_query($sql); //定义数组,把数据存放在数组中
$info = array();
while ($rows = mysql_fetch_assoc($rs)) {
$info[] = $rows;
} //将总页码保存到数组
$info[] = $pageCount; echo json_encode($info); ?>

使用JSON实现分页的更多相关文章

  1. 基于Jquery+Ajax+Json实现分页显示

    1.后台action产生json数据. List blackList = blackService.getBlackInfoList(mobileNum, gatewayid, startDate, ...

  2. js 从一个json拼接成另一个json,并做json数据分页table展示

    先给数据: //原始json数据json = [{"id":"1","aid":"013","performa ...

  3. Javascript实例技巧精选(6)—滚动鼠标中键读取Json数据分页显示网页内容

    >>点击这里下载完整html源码<< 截图如下: 滚动鼠标中键读取Json数据分页显示网页内容,关键的Javascript如下: <script type="t ...

  4. jQuery +ajax +json+实现分页

    正文 首先我们创建一般处理程序,来读取数据库中内容,得到返回值. 创建文件,GetData.ashx. 我这里是用的存储过程,存储过程会再下面粘出来,至于数据只是实例,你们可根据需求自行读取数据 代码 ...

  5. javascript实现json页面分页

    下午有个朋友问json 数据怎么分页 就捣鼓了一个东东出来 下面直接代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

  6. 基于Jquery+Ajax+Json+高效分页

    摘要 分页我相信大家存储过程分页已经很熟悉了,ajax更是耳熟能详了,更别说我们的json,等等. 如果说您没用过这些东东的话,我相信看完这篇博文会对您有帮助的,,如果有任何问题不懂或者有bug没问题 ...

  7. 实习小白笔记一(鼠标悬停、获取多选、提交修改、layer页面、单元格文字长度、json、分页、左连接)

    ①easyui 当鼠标悬停显示单元格信息: $(this).datagrid('doCellTip',{'max-width':'600px','delay':300}); ②jquery 获取che ...

  8. jquery+json实现分页效果

    son作为一种轻量级的数据交换格式,由于其传输数据格式的方便性,今天偶然想将其应用于分页实现,分页做为web开发一个长久的话题,其应用的高效与重要性就不多说了本文主要技术:反射机制,Json数据格式, ...

  9. ASP.NET MVC获取微信返回的json数据分页

    View @model JiaYe.WeiXin.Models.ViewModels.UserViewModel <div class="pull-left pagination&qu ...

随机推荐

  1. zoj4016 Mergeable Stack

    题意:对n个栈,有q次操作.每个操作可能为三种情况中的一种:1.将v插入到s栈的顶端:2.输出s栈的栈顶(若栈为空则输出empty):3.将栈t插入到栈s的栈顶. 开始考虑到指针可能会mle,用数组模 ...

  2. Mybatis常用知识点总结

    1. #{}和${}的区别是什么? ${}是Properties文件中的变量占位符,它可以用于标签属性值和sql内部,属于静态文本替换,比如${driver}会被静态替换为com.mysql.jdbc ...

  3. 转的很好的前端html 内容

    HTML 初识 web服务本质 import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) s ...

  4. Eclipse无法编译 build无效 没有class文件

    问题原因: 我遇到这个问题的原因是: maven 插件引起的,maven clean或maven build后,经常无法自动编译class(虽然project自动编译了,但是只有包文件夹名,而没有cl ...

  5. Centos 7 安装 Visual stdio Code

    最近微软正式发布了.net code 和asp.net code.尝试了下在linux下.net code和asp.net code使用. 具体怎么使用.net code 和asp.net code ...

  6. Android activity之间的跳转和数据传递

    1.Activity之间的跳转 并且 传递数据 A Activity进行的操作 Intent intent = new Intent(context, B.class); intent.putExtr ...

  7. Exceptionless搭配log4net记录日志

    接上篇: Exceptionless 本地部署 在部署完成后可以使用log4net搭配Exceptionless来记录日志. 过程很简单,使用Nuget安装Exceptionless.Log4net, ...

  8. VS2015 未能正确加载 JavascriptWebExtensionsPackage

    解决方法: Close Visual Studio Open the %UserProfile%\AppData\Local\Microsoft\VisualStudio\<version> ...

  9. vue制作小程序--server

    服务端代码,开发者工具有提供 指南 https//cloud.tencent.com/document/product/619/11442 参考文档API https://developers.wei ...

  10. Architecture of a Java Compiler

    Architectural Overview   A modern optimizing compiler can be logically divided into four parts:   Th ...