分页的另一种实现-不用额外请求

原创 2015年11月22日 13:54:10
情景:千里码有些最优化题目的旁边会有一个排行榜,用来展示不同的答案。比如[Uber打车匹配](http://www.qlcoder.com/task/7596)

这里写图片描述

这里的答题人数并不多,但是[老王装货](http://www.qlcoder.com/task/7566)就爆炸了,80多个 页面拉下去都好长一段,于是给排行榜加了个分页功能。但是出于这块的html结构实在那啥(某人躺枪),用请求的话代码确实可以实现,但是出于偷懒,想出了另外一个法子,不过这种法子适用于数据量不是很大的情况下。

分页插件使用的是jq的simplePagination,
DOM结构如下:
`<div class="well" style="width:415px;"><h4>uber车辆匹配排行榜</h4>        
    <div style="height:400px;overflow:hidden;"> <!--  容器高度-->
    <div class="row">

    <div class="col-md-1">
    1
    </div>
    <div class="col-md-5">
    端着木鱼敲代码
    </div>
    <div class="col-md-6">

4991kg

    <div class="col-md-1">
    2
    </div>
    <div class="col-md-5">
    xxmodd
    </div>
    <div class="col-md-6">

4991kg
`


在外面加了一层容器,设死高度(具体高度跟句实际需求设),overflow:hidden;这里数据只放了几条,实际是所以数据一开始就加载了的。

JS代码如下:

$("#fenye").pagination({
                prevText:"上一页",
                nextText:"下一页",
                ulClass:"in clearfix",
                items: 1000,//--总个数
                itemsOnPage: 20,//--每页个数
                currentPage:1,//-当前
                //hrefTextSuffix:"javascript:;",
                hrefText:"",
                onPageClick:function(pageNumber, event){
                    console.log(pageNumber);
                    $(".well .row").removeAttr("style");
                    $(".well .row").slice(0,(pageNumber-1)*20).css({"height":"0","overflow":"hidden"});
                }
            });

这里设置了每页个数20个,原理就是,当你点击某一页的时候,只需要把前面(pageNumber-1)*20的数据全部隐藏就好了。
主要函数就是slice(start,end);
比如slice(2,7)其中2,7是索引值,包含2但不包含7

当然数据量较少的情况下可以玩玩,数据量大的慎重。。

版权声明:本文为博主原创文章,未经博主允许不得转载。

分页插件jquery.simplePagination.js使用笔记

1. test_box.jsp页面: loadData">   //分页             paging">         pagingD">    //js请求 function...
  • Baple
  • Baple
  • 2016年12月15日 17:40
  • 1267

React简单的分页代码实现(子组件向父组件传值)

前言分页其实本身很容易实现,我觉得完全没必要使用组件,这里总结一下我实现的分页组件,功能除了上一页和下一页,还有一个输入页码跳转到指定页。上一页和下一页还做了一个简单的判断,即当在第一页和最后一页时不...
  • dengdengda
  • dengdengda
  • 2017年11月14日 18:57
  • 199

layer分页的使用

由于界面美观程度要求较高,所以在网上找了一个分页相对来说比较好看的,layer分页,内置封装了很多 方法,使用相对来说比较简单,下面给大家具体介绍下:   简单实现一个小例子:    ...
  • hanxintong9
  • hanxintong9
  • 2016年05月30日 21:45
  • 16316

不用额外空间,交换两个数

方法一:算术 x = x + y; y = x - y; x = x - y;  方法二:异或 x = x^y;// 只能对int,char.. y = x^y; ...
  • u014540717
  • u014540717
  • 2016年06月11日 23:42
  • 1084

不用额外变量交换两个整数的值

不用额外变量交换两个整数的值 【题目】   如何不用任何额外变量交换两个整数的值? 【解答】   使用位运算的异或运算,或者使用加法运算   a异或b的结果是c,那么c就是a整数位信息和b整数位信息的...
  • u010456903
  • u010456903
  • 2015年10月04日 23:01
  • 1136

EasyUI的datagrid组件实现分页

EasyUI的datagrid组件实现分页,后台为Struts2+Spring+Hibernate,利用DetachedCriteria对象进行简单的分页查询。要点: datagrid组件的参数和响应...
  • jianshen0925
  • jianshen0925
  • 2016年11月08日 14:23
  • 1310

公共组件使用手册

该文档为国家电网PMS2.0开发手册 公共组件使用手册                                     PMS2.0项目组 2...
  • jiejie11080
  • jiejie11080
  • 2017年01月03日 14:40
  • 1540

分页功能的实现方法(不需要插件)

分页功能的实现方法在开发过程中经常会用到分页的功能,除了引用插件外,也可以使用最简单的方式来实现这个功能。下面分享一下我在项目中使用到的分页方法,非常的容易理解和操作,当然,如果觉得效果太一般了,那么...
  • xjlinme
  • xjlinme
  • 2017年05月03日 16:04
  • 542

不占用任何额外空间的情况下交换两个数的值

问题: 给你两个整数,比如 a = 10, b = 20,在不占用任何额外空间的条件下交换两个数的值。 思路: 首先,问题看起来是挺不可思议,但是也是挺有趣的。既然不能占用任何空间,只能在已有的...
  • beiyeqingteng
  • beiyeqingteng
  • 2011年12月27日 13:25
  • 2558

Vue2.0+ElementUI+PageHelper实现的表格分页

Vue2.0+ElementUI+PageHelper实现的表格分页
  • u012907049
  • u012907049
  • 2017年04月19日 10:19
  • 19348
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:分页的另一种实现-不用额外请求
举报原因:
原因补充:

(最多只允许输入30个字)