js 获取后台数据分页
页面创建一个存放内容的容器,以及分页的容器:
<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 + " 共" + totalPage + "页," + dataSize + "条记录</div>";
pager.innerHTML = phtml;
}
//回车跳转,注意控制输入数字
function goto(obj, pageSize){
if(event.keyCode == 13){
pageTo(pageSize, parseInt(obj.value));
}
}
简单实现功能如下:
js 获取后台数据分页的更多相关文章
- js获取后台数据
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- 通过js获取前台数据向一般处理程序传递Json数据,并解析Json数据,将前台传来的Json数据写入数据库表中
摘自:http://blog.csdn.net/mazhaojuan/article/details/8592015 通过js获取前台数据向一般处理程序传递Json数据,并解析Json数据,将前台传来 ...
- Struts1.x下使用jquery的Ajax获取后台数据
jquery中有多种Ajax方法来获取后台数据,我使用的是$.get()方法,具体的理论我不解释太多,要解释也是从别的地方copy过来的.下面就介绍我的项目中的实现方法. 前台页面: ...
- Java获取后台数据,动态生成多行多列复选框
本例目标: 获取后台数据集合,将集合的某个字段,比如:姓名,以复选框形式显示在HTML页面 应用场景: 获取数据库的人员姓名,将其显示在页面,供多项选择 效果如下: 一.后台 查询数据库,返回List ...
- Vue axios异步获取后台数据alert提示undefined
记录一个小问题,关于分页查询套餐 前台通过axios异步请求获取后台数据alert弹出数据提示undefined 下面有三个bean PageResult /** * 分页结果封装对象 */ publ ...
- 用ajax获取后台数据,返回json数据,怎么在前台使用?
用ajax获取后台数据,返回json数据,怎么在前台使用呢?后台 C# code ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if (dataType == &qu ...
- Js获取后台集合List的值和下标的方法
Js获取后台集合List的值和下标的方法 转载自:http://blog.csdn.net/XiaoKanZheShiJie/article/details/47280449 首先用的是struts2 ...
- 前台通过ajax获取后台数据,PHP如何返回中文数据
现在经常使用Ajax调用后台php获取后台数据,但是PHP返回的数据如果含有中文的话,Ajax会无法识别,那咋整呢,我用的是比较笨的方法,但是实用: 方法一: echo urldecode(json_ ...
- bootstrap table通过ajax获取后台数据展示在table
1. 背景 bootstrap table 默认向后台发送语法的dataType为 json,但是为了解决跨域问题我们需要将dataType改为jsonp,这时就需要修改bootstrap table ...
随机推荐
- java向上转型的问题
import java.util.Arrays;import java.util.HashSet;import java.util.Set;class A{ private String s1 = & ...
- mybatis学习之入门实例
测试版本 mybatis:3.2.8 数据库:mysql 项目结构 jar包准备 mybatis-3.2.8.jar mysql-connector-java-5.1.39-bin.jar junit ...
- 2017年11月28日 C#进程和线程
进程 需要放using System.Diagnostics;才可以用进程 用时的方法名为Process 用两个按钮一个为选择文件夹一个为打开可以打开系统内的进程. 注意:打开时一定要用进程名 Pro ...
- enter键触发事件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 洛谷P1081 开车旅行(倍增)
题意 题目链接 Sol 咕了一年的题解.. 并不算是很难,只是代码有点毒瘤 \(f[i][j]\)表示从\(i\)号节点出发走了\(2^j\)轮后总的距离 \(da[i][j]\)同理表示\(a\)的 ...
- js-滚动到指定位置导航栏固定顶部
最近整理一下之前做的一个项目,把滚动条动态固定顶部的代码整理出来和大家分享,上代码 <!DOCTYPE html> <html> <head> <meta c ...
- css手风琴
<style> .box{ width: 1000px; height: 450px; margin:0 auto; overflow: hidden;} .box div{ width: ...
- js中的this--执行上下文
条件:函数调用的时候 才有执行上下文 this 不同情况的调用,this也不同 1)当函数直接打点调用,此时的this 是window 2)事件触发函数,此时的this是触发这个事件的对象 3)当对 ...
- GetVersion和GetVersionEx
原文:http://www.cnblogs.com/VOIP/archive/2011/03/22/1990927.html Windows API 中有两个函数可以得到系统版本信息:GetVersi ...
- listview cacheColorHint,listSelector属性
ListView是常用的显示控件,默认背景是和系统窗口一样的透明色,如果给ListView加上背景图片,或者背景颜色时,滚动时listView会黑掉, 原因是,滚动时,列表里面的view重绘时,用的依 ...