前端分页_前端微服务框架

前端分页_前端微服务框架对于前端分页,不懂的人也许会觉得是个笑话,分页不都是后端的事情吗?的确不得不承认,处理逻辑性的话,还是后端更加友好,但前端分页,也有他友好的一面,举个栗子:服务器压力请求减少,换页时用户体验好。直戳主题——前端实现分页的原理及其步骤

大家好,欢迎来到IT知识分享网。

一. 前端分页:

1.分页实现思路:
当前页: currentPage   //直接获取
后端提供数据: results  //发送请求,获取数据
数据总条数:totalCount = results.length;

举个栗子: 103条数据 每页10条 一共分 11 页:

第一页: firstPage: 1 

上一页: previousPage = Math.max(currentPage – 1, 1);
当前页  上一页
  3      2
  4      3
  1      1

下一页: next = Math.min(currentPage + 1, totalPage);
当前页  下一页
  1      2
  2      3
  11     11

总页数:totalPage = Math.ceil( totalCount / pageSize )

// 下面是关键点:(每页显示 “数据的开始坐标和结束坐标”):
起始坐标: start = (currentPage-1) * pageSize
结束坐标: end= Math.min(start + pageSize , totalCount);

当前页  起始坐标  结束坐标
  1      0       10
  2      10      20
  3      20      30
  …
  10     90      100
  11     100     103

那么,每页显示的数据就可以截取出来:
第一种截取方式:
var results;
var arr = [];
for(var i=start; i<end; i++) {
   arr.push(results[i]);
};

//再用arr去渲染模板

第二种截取方式:
var arr = results.slice(start, end);
//再用arr去渲染模板

 


 

2.分页实现的步骤:

1). 发送请求,获取所有的数据:
$.get(‘http://realauth.com’, function(data){
   var results = JSON.parse(data);
});

2). 自己定一个每页显示多少条:
var pageSize = 3

3). 自己计算出总页数,计算出数据总条数:
var totalCount = results.length                     //总页数
totalPages = Math.ceil ( totalCount / pageSize );  //总条数 向上取整

4). 使用分页插件:(举个栗子说明下配置,其他插件对应相关配置说明走)
$(‘#pagination’).twbsPagination({
totalPages: totalPages , // 总页数
visiblePages: 5,         // 插件当前展示几页
first: ‘首页’,
next: ‘下一页’,
prev: ‘上一页’,
last: ‘尾页’,
onPageClick: function (event, currentpage) {      // 点击页码, 触发事件(调用插件中封装好的方法onPageClick())
  //console.log(currentpage);                    // 通过currentpage获取当前页码
 }
});

5). 计算出每页的“开始坐标”和“结束坐标”:
$(‘#pagination’).twbsPagination({

//引入分页插件配置(根据个人需求引入需要的插件,这里只是举个分页插件栗子):
totalPages: totalPages , // 总页数
visiblePages: 5,        // 插件当前展示几页
first: ‘首页’,
next: ‘下一页’,
prev: ‘上一页’,
last: ‘尾页’,
onPageClick: function (event, currentpage) {           // 点击页码, 触发事件(调用插件中封装好的方法onPageClick())

   //console.log(currentpage);                         // 通过currentpage获取当前页码

   var start = (currentpage-1) * pageSize;             //截取数据的起始坐标
   var end = Math.min(start + pageSize , totalCount);  //截取数据的结束坐标
   var arr = results.slice(start, end);                //以一个新数组的形式,返回截取的元素

   var html = template(“mytmpl”, {“list”: arr});       //使用artTemplate模板中template()方法,进行页面数据拼接

   $(“#userTbody”).html(html);                         //渲染数据在页面

}

});

 

 

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/29775.html

(0)

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信