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

原创 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

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

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

相关文章推荐

摇杆的另一种实现方法

  • 2013年05月29日 23:38
  • 490KB
  • 下载

【Android】另一种Tab的实现--TabLayout

在我们的应用市场上的程序,十个应用程序有九个是采用了Tab页卡的这样一种形式。实现的方式也各不相同,古老的TabHost,ViewPager+Fragment+自定义的Title,3.0后Action...

另一种风格实现CtrueColorToolBar

  • 2011年03月22日 23:37
  • 3.34MB
  • 下载

TabLayout:另一种Tab的实现方式

在5.0以前我们想要实现像网易新闻客户端那样的的Tab可以有很多种选择: 比如古老的TabHost,3.0后ActionBar所提供的Tab,以及各种成熟的Tab开源控件等,都可以直接或间接地实...

Android AutoLayout全新的适配方式 堪称适配终结者---TabLayout:另一种 Tab 的实现方式----QuickReturn:用于ScrollView 和 ListView 的

转载:http://blog.csdn.net/lmj623565791/article/details/49990941 转载地址:http://android.jobbole.com/81995...

TabHost效果实现的另一种方式---------不继承TabActivity

直接继承Activity,不继承TabActivity,实现tabhost的效果 package com.hsx.tab; import android.app.Activity; imp...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:分页的另一种实现-不用额外请求
举报原因:
原因补充:

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