获取后台数据分页

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

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

js如下:

$.ajax({
url: "url",
//headers: {
//"AccessToken" : "token"
//},  //如果需要
type: "GET/POST",
dataType: "json",
success: function(result){
console.log(result);
//获取后台发送过来的JSON数据
jsonData = getJsonData(result.length,result);
//加载数据
pageTo(13,1);   // 定义每页显示多少条数据,以及默认显示当前页数为第几页
},
error: function(data){
console.log("error")
}
});

// 创建一个空的数组 用来存放符合要求的在页面上显示的所有数据
var jsonData = [];
function getJsonData(size,result) {
var datas = [];
for (var idx = 0; idx < size; idx++) {
  datas.push({
    contents : result[idx].title,
    id : result[idx].NewsID   //定义想要展示的内容
  });
}
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‘ disabled 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));
}
}

时间: 2024-11-06 07:31:39

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

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

记录一个小问题,关于分页查询套餐 前台通过axios异步请求获取后台数据alert弹出数据提示undefined 下面有三个bean PageResult /** * 分页结果封装对象 */ public class PageResult implements Serializable { //总记录数 private Long total; //当前页结果 private List rows; //get,set方法省略 .... } QueryPageBean /** * 封装查询条件 */

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

现在经常使用Ajax调用后台php获取后台数据,但是PHP返回的数据如果含有中文的话,Ajax会无法识别,那咋整呢,我用的是比较笨的方法,但是实用: echo urldecode(json_encode(array('status'=>'1', 'errMsg'=>urlencode('数据传递错误,请重试')))); return;

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

用ajax获取后台数据,返回json数据,怎么在前台使用呢? 后台 C# code ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if (dataType == "SearchCustomer")                 {                     int ID;                     if (Int32.TryParse(CustomerID, out ID))                     {    

sencha touch 通过.axhx获取后台数据时,Unable to parse the JSON returned by the server: Error: You&#39;re trying to

注意:如果你的store跟我一样是使用.ashx从.NET后台获取的,并且用sencha cmd自带的web服务器调试,在chrome调试的时候回会返回如下错误. [WARN][Ext.data.reader.Reader#process] Unable to parse the JSON returned by the server: Error: You're trying to decode an invalid JSON String: <%@ WebHandler Language=&qu

201507221403_《backbone之一——新建模型和集合、实例化模型、模型上监听事件的方法、模型设置和获取后台数据、配置理由方法、视图绑定事件的方法、绑定模型等》

一 . 新建 var model_1 = new Backbone.Model({'name':'hello'}); var model_2 = new Backbone.Model({'name':'hi'}); var models = new Backbone.Collection(); models.add( model_1 ); models.add( model_2 ); alert( JSON.stringify(models) ); 二. 实例化模型 var M = Backbo

mvc 页面简单get获取后台数据

后台方法 public ActionResult Linq() { var lt = UserSys.FindAll(); Hashtable ht = new Hashtable(); ht.Add("data",lt); return Json(ht, JsonRequestBehavior.AllowGet); } 页面元素 <input type="text" name="ID" /> <input type="

Reactjs之Axios、fetch-jsonp获取后台数据

1.新增知识点 /** Axios获取服务器数据(无法跨域,只能让后台跨域获取数据) react获取服务器APi接口的数据: react中没有提供专门的请求数据的模块.但是我们可以使用任何第三方请求数据模块实现请求数据 axios介绍: https://github.com/axios/axios axios的作者觉得jsonp不太友好,推荐用CORS方式更为干净(后端运行跨域) 1.安装axios模块npm install axios --save / npm install axios --

JavaScript中fetch获取后台数据

除了XMLHttpRequest对象来获取后台的数据之外,还可以使用一种更优的解决方案——fetch ㈠fetch示例 fetch获取后端数据的例子: // 通过fetch获取百度的错误提示页面 fetch('https://www.baidu.com/search/error.html') // 返回一个Promise对象 .then((res)=>{ return res.text() // res.text()是一个Promise对象 }) .then((res)=>{ console.

通过Rest service获取后台数据的多种方法

开发在开发网页的时候用Rest service来获取Json数据,然后对数据进行组织后显示在网页上,那我们在做自动化测试的时候对这种情况需要验证的有以下2点: 1. Service的数据可以正常被获取到 2. 数据都正确的被网页显示出来并且显示在正确的地方 那么要做这2点验证,自动化测试的具体步骤如下 1. 通过方法获取到这个service中的数据(json,xml) 2.通过解析json或xml来对数据进行整理和提取 3. 验证这些整理过的数据都显示在正确的地方 后面2点再说,对于第一点获取的