页面创建一个存放内容的容器,以及分页的容器:

<div id="content"></div>
<div id="pager"></div>

页面js 代码如下:

$.ajax({
url: "url",
headers: {
"AccessToken" : "accessToken"
}, //如果需要
type: "GET",
dataType: "json",
success: function(result){
console.log(result);
//获取后台发送过来的JSON数据
jsonData = getJsonData(result.length,result);
//加载数据
pageTo(10,1); // 定义每页显示多少条数据,以及默认显示当前页数为第几页
},
error: function(error){
console.log(error)
}
}); // 创建一个空的数组 用来存放符合要求的在页面上显示的所有数据
var jsonData = [];
function getJsonData(size,result) {
var datas = [];
for (var idx = 0; idx < size; idx++) {
datas.push({
contents : result[idx].content,  //定义想要展示的内容及其他
id : result[idx].id
});
}
return datas;
}
//获取当前页数据
function query(cur, size) {
var begin = (cur - 1) * size;
var end = cur * size;
return jsonData.slice(begin, end);
} //分页函数开始
function pageTo(pageSize, curPage) {
var dataSize = jsonData.length;
//判断当前页数
if (dataSize == 0) {
content.innerHTML = "<span class='no-content'>没有查询到任何数据!</span>";
return;
}
var totalPage = Math.ceil(dataSize / pageSize);
// html推送内容
var datas = query(curPage, pageSize);
var html = "";
for (var index = 0; index < datas.length; index++) {
var data = datas[index];
html = html + "<li>";
html = html + "<a target='_blank' href='href'>" + (data.contents || '') + "</a>";
html = html + "<span>" + (data.id|| '') + "</span>";
html = html + "</li>";
}
content.innerHTML = html;
//pager
var phtml = "<div class='pager'>";
if (curPage == 1) {
phtml = phtml + "<a href='#' class='button no-page'>上一页</a>";
}
else {
phtml = phtml + "<a href='#' class='button' onclick='pageTo("+pageSize+","+(curPage-1)+")'>上一页</a>";
}
phtml = phtml + "<input type='text' onkeyup=\"value=value.replace(/[^0-9]/g,\'\')\" value='" + curPage + "' onkeypress='goto(this, " + pageSize+");'>";
if (curPage == totalPage) {
phtml = phtml + "<a href='#' class='button no-page'>下一页</a>";
}
else {
phtml = phtml + "<a href='#' class='button' onclick='pageTo("+pageSize+","+(curPage+1)+")'>下一页</a>";
// phtml = phtml + "<a href='#' class='button' onclick='test("+pageSize+","+curPage+");'>下一页</a>";
}
phtml = phtml + "&nbsp;共" + totalPage + "页," + dataSize + "条记录</div>";
pager.innerHTML = phtml;
}
//回车跳转,注意控制输入数字
function goto(obj, pageSize){
if(event.keyCode == 13){
pageTo(pageSize, parseInt(obj.value));
}
}

简单实现功能如下:

js 获取后台数据分页的更多相关文章

  1. js获取后台数据

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  2. 通过js获取前台数据向一般处理程序传递Json数据,并解析Json数据,将前台传来的Json数据写入数据库表中

    摘自:http://blog.csdn.net/mazhaojuan/article/details/8592015 通过js获取前台数据向一般处理程序传递Json数据,并解析Json数据,将前台传来 ...

  3. Struts1.x下使用jquery的Ajax获取后台数据

        jquery中有多种Ajax方法来获取后台数据,我使用的是$.get()方法,具体的理论我不解释太多,要解释也是从别的地方copy过来的.下面就介绍我的项目中的实现方法.     前台页面: ...

  4. Java获取后台数据,动态生成多行多列复选框

    本例目标: 获取后台数据集合,将集合的某个字段,比如:姓名,以复选框形式显示在HTML页面 应用场景: 获取数据库的人员姓名,将其显示在页面,供多项选择 效果如下: 一.后台 查询数据库,返回List ...

  5. Vue axios异步获取后台数据alert提示undefined

    记录一个小问题,关于分页查询套餐 前台通过axios异步请求获取后台数据alert弹出数据提示undefined 下面有三个bean PageResult /** * 分页结果封装对象 */ publ ...

  6. 用ajax获取后台数据,返回json数据,怎么在前台使用?

    用ajax获取后台数据,返回json数据,怎么在前台使用呢?后台 C# code   ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if (dataType == &qu ...

  7. Js获取后台集合List的值和下标的方法

    Js获取后台集合List的值和下标的方法 转载自:http://blog.csdn.net/XiaoKanZheShiJie/article/details/47280449 首先用的是struts2 ...

  8. 前台通过ajax获取后台数据,PHP如何返回中文数据

    现在经常使用Ajax调用后台php获取后台数据,但是PHP返回的数据如果含有中文的话,Ajax会无法识别,那咋整呢,我用的是比较笨的方法,但是实用: 方法一: echo urldecode(json_ ...

  9. bootstrap table通过ajax获取后台数据展示在table

    1. 背景 bootstrap table 默认向后台发送语法的dataType为 json,但是为了解决跨域问题我们需要将dataType改为jsonp,这时就需要修改bootstrap table ...

随机推荐

  1. [shell]管理 Sphinx 启动|停止|重新生成索引的脚本

    对于启动sphinx的服务,可以直接输入如下命令 /usr/bin/searchd -c /etc/sphinx/sphinx.conf <!-- /usr/local/bin/searchd  ...

  2. Window 10 安装 MySQL

    1.下载 点击官网下载路径下载压缩包 点击第一个按钮后出现如下界面 下载后解压缩,我这里是放在C:\web\目录下 2.创建配置文件 注意:my.ini文件是自己创建的配置文件 文件内容如下: [my ...

  3. Java 异常的处理方式--throws和try catch

    异常的第一种处理方式throws. 看以下例子: import java.io.*;public class ExceptionTest04{ public static void main(Stri ...

  4. phpmyadmin登录报错crypt_random_string requires at least one symmetric cipher be loaded 解决方法

    通过phpmyadmin登陆时提示以下错误: phpmyadmin crypt_random_string requires at least one symmetric cipher be load ...

  5. VUE的两种跳转push和replace对比区别

    router.push(location) 在vue.js中想要跳转到不同的 URL,需要使用 router.push 方法. 这个方法会向 history 栈添加一个新的记录,当用户点击浏览器后退按 ...

  6. thinkphp5设置404页面不跳转

    thinkphp5设置404页面的步骤: 1. 首先关闭调试模式,即配置application/config文件,使'app_debug' => false 2. 添加自定义404页面跳转地址, ...

  7. wampserver 点击跳转localhost变0.0.0.0的解决方法!

    最近下载新版本wampserver发现点击项目不会自动添加localhost了,导致访问项目很麻烦. 修改如下 修改wamp根目录下的wampmanager.conf urlAddLocalhost ...

  8. CentOS使用fdisk扩展磁盘空间

    使用情况: 1. 虚拟机配置150G硬盘,初始化为/dev/sdb1,后因为磁盘空间不够使用,动态扩容至300G,扩容完成后,想要动态扩容/dev/sdb1分区. 2. 磁盘空间300G,之前分区只划 ...

  9. SSIS 和 SSRS自制Template

    可以使用VS 制作一个SSIS 的Package. 路径:C:\Program Files\Microsoft Visual Studio 9.0\Common7\IDE\PrivateAssembl ...

  10. 【统计学】英文概念之Mean和Average的区别

    通过专门检索和其他课本的比较,得到了如下结论.统计学在分析数据时,需要对数据进行最基础的描述性分析.在众多描述分析的指标中,平均数指标能够反映分布数列集中趋势.但是平均数指标包括两类:一类是数值平均数 ...