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 ...
随机推荐
- JQ(查找)
1.由下级到上级再到下级 var aa=$("td:eq(0)").parents("tr").find("td:eq(1)"); 2.
- 8、springboot之定时任务
@Configuration @EnableScheduling public class SchedulingConfig { @Scheduled(cron = "0/5 * * * * ...
- 合理使用线程池 ThreadPool.QueueUserWorkItem()
//==>自建线程 new Thread(() => { //线程任务 Console.WriteLine(Thread.CurrentThread.ManagedThreadId); } ...
- package和package-lock区别;dependencies和devDependencies区别
package和package-lock package.json: 主要用来定义项目中需要依赖的包 package-lock.json: 在 npm install时候生成一份文件,用以记录当前状态 ...
- mysql 笔记3
--建库create database dsdb DEFAULT CHARACTER set utf8 collate utf8_general_ci;/*删除数据库drop DATABASE 数据库 ...
- JS实现九九乘法表和时间问候语
编码 小练习,练习使用循环实现一个九九乘法表 第一步,最低要求:在Console中按行输出 n * m = t 然后,尝试在网页中,使用table来实现一个九九乘法表 <!DOCTYPE htm ...
- 工作中常用的sql语句以及知识整理
一.常用的sql语句 1.建表语句 create table tabname(colname1 type1 [not null][primary key], colname2 type2,...) 根 ...
- 拖动条SeekBar
1TextView tv=(TextView)findViewById(R.id.TV); 2 tv.setMovementMethod(ScrollingMovementMethod.getInst ...
- C#基础拾遗系列之二:使用ILSpy探索C#7.0新增功能点
C#基础拾遗系列之二:使用ILSpy探索C#7.0新增功能点 第一部分: C#是一种通用的,类型安全的,面向对象的编程语言.有如下特点: (1)面向对象:c# 是面向对象的范例的一个丰富实现, 它 ...
- 3.用less浏览文件内容
less 命令是一个用来浏览文本文件的程序.纵观 Linux 系统,有许多人类可读的文本文件.less 程序为我们检查文本文件 提供了方便. 什么是“文本” 在计算机中,有许多方法可以表达信息.所有的 ...