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

<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. python全栈开发之路

    一.Python基础 python简介 python数据类型(数字\字符串\列表) python数据类型(元组\字典) python数据类型(集合) python占位符%s,%d,%r,%f prin ...

  2. js 密码 正则表达式

    1. 代码 function checkPassword(str){ var reg1 = /[!@#$%^&*()_?<>{}]{1}/; var reg2 = /([a-zA- ...

  3. jQuery实现18位身份证输入隔位添加空格及格式验证

    说明:jQuery实现身份证输入添加空格,表单验证身份证输入,并且输入时前6位添加一个空格,中间8位后添加一个空格,及身份证格式验证 参考:基于jquery实现的银行卡号每隔4位自动插入空格的实现代码 ...

  4. (转)快速了解微信小程序的使用,一个根据小程序的框架开发的todos app

    微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程, ...

  5. 软件项目技术点(9)——如何将gif动态图拆分绘制

    AxeSlide软件项目梳理   canvas绘图系列知识点整理 背景介绍 我们的软件支持插入gif图片,并且展示在软件里是动态的,例如插入下面这张gif图. 在软件里显示的同样是这样的动态效果: 那 ...

  6. Visual Studio扩展与更新中插件被禁用,安装后无法使用

    在Visual Studio中的扩展与更新中安装插件后,显示[禁用],重新安装后仍然不能使用,但是VS默认安装的扩展却可以正常使用. 这里需要注意下方显示“当前不允许加载每用户扩展”,点击“启用每用户 ...

  7. SpringBoot框架下基于Junit的单元测试

    前言 Junit是一个Java语言的单元测试框架,被开发者用于实施对应用程序的单元测试,加快程序编制速度,同时提高编码的质量.是一个在发展,现在已经到junit5,在javaEE开发中与很多框架相集成 ...

  8. restful知识点之二restframework视图

    restful协议理解:面向资源开发 restful协议 ---- 一切皆是资源,操作只是请求方式 ----book表增删改查 /books/ books /books/add/ addbook /b ...

  9. lsqnonlin函数使用方法

    非线性最小二乘函数  lsqnonlin  格式x = lsqnonlin(fun,x0) %x0 为初始解向量:fun为,i=1,2,-,m,fun返回向量值F,而不是平方和值,平方和隐含在方法中, ...

  10. javascript fundamental concept

    http://hzjavaeyer.group.iteye.com/group/wiki?category_id=283 上面这个url非常适合javascript初学者阅读,感谢原作者的分享 什么是 ...