jQuery自渲染分页插件

所属分类:导航-分页

jQuery自渲染分页插件 ie兼容8

更新时间:2017/5/8 下午6:02:58

更新说明:在args(第二个参数)里增加了 align属性,默认是"right",用来定义页码内容的对齐方式是靠左还是靠右。

解决问题:默认时,页码会根据当前盒子的宽度和最大展现的页码数自动计算每个页码的宽度。但是在页码总数很少到小于最大展现的范围时,页码会靠左对齐。右边会留白。从而不美观。或达不到用户需求。

故提供此参数。用户自定义对齐方式。在页码很少时自定义靠左还是靠右。


使用方法

1. 引入jquery,和此插件jquery.page.js .

2. 准备一个放页码的盒子。例如有个class为page的盒子。尽量有宽度。

3.复制一下代码。

$('.page').createPage(function(n){
   //n即是页码,这里写你操作页面的东西
})

4.OK了。更多功能可见附件里的参数。

相关插件-分页

一款非常简洁漂亮方便调用的jQuery前端分页

一款非常简洁漂亮方便调用的jQuery前端分页,没有多余的JS和文件。
  分页
 35100  77

个性好看的分页插件-JUI_PAGINATION

jui_pagination 是一款结合了jquery UI的分页插件,该分页插件和以往的不同,不光有数字页码按钮,而且还有滑动条来让我滑倒相应的页面。
  分页
 19586  7

jQuery分页插件jQuery.pager.js

表格分页,li分页
  分页
 18433  40

jQuery分页插件cypager

jQuery分页插件cypager传入总页数和每页显示条数,可设置显示多少位数字,ajax请求后台返回当前页条数
  分页
 11757  23

讨论这个项目(24)回答他人问题或分享插件使用方法奖励jQ币

    唐伯虎点蚊香啦 0
    2017/9/22 10:44:25
    大佬,如果想设置一页显示10条数据,该怎么做呢?
        kmh02281
        2017/9/22 11:10:57

        回掉函数里写你的数据。function(n){   (n-1)*10 到 n*10 就是你的数据范围       };

    回复
    L 0
    2017/9/15 16:20:01

    大神,我想加一个"首页","尾页"的功能.该怎么加呢?

        kmh02280
        2017/9/16 8:58:40
        没有此功能
    回复
    风儿 0
    2017/8/10 17:19:29
    var count=10,page=1,total=0;
    $.ajax({
        url:"/getInfo?count=" + count + "&page=" + page,
        success:function (result) {
            total=result.totalPage;
            console.log(total)
    
        }
    })
    $('.page3').createPage(function(n){
    },{
    	pageCount:total,//总页码,默认10
    	showPrev:false,//是否显示上一页按钮
    	showNext:false,//是否显示下一页按钮
    	showTurn:false,//是否显示跳转,默认可以
    	showNear:4,//显示当前页码前多少页和后多少页,默认2
    	showSumNum:false//是否显示总页码
    },{

    为什么我用后来获取来的总页数给pageCount赋值就什么也不显示了,我断点看了下 total=0;为什么啊,但是我给pageCount随便赋个值,在ajax里可以输出 tatal的值,求解

        kmh02280
        2017/8/12 12:34:02

        大哥,ajax是异步的啊!!你的把代码放到sucess里面

    回复
    风儿 0
    2017/8/10 17:16:42

    为什么我用后来获取来的总页数给pageCount赋值就什么也不显示了,我断点看了下 total=0;为什么啊,但是我给pageCount随便赋个值,在ajax里可以输出 tatal的值,求解

    回复
    尘满面、鬓如霜 归来不识 0
    2017/8/7 15:49:45

    自动分页可以吗,设定每页显示多少条数据,根据总数据自动分为多少页

    回复
    骑?猪┠撞墙 0
    2017/7/15 8:32:28

    厉害好用

        ?糍的青春最美丽0
        2017/7/31 19:20:49

        请问这个怎么和后台ajax绑定使用啊,谢谢!

    回复
    天天 0
    2017/7/10 19:00:33
    大神,怎么自定义有多少页
        kmh02281
        2017/7/11 9:59:44
        {
            pageCount:10,//总页码,默认10
            current:1,//当前页码,默认1
            showPrev:true,//是否显示上一页按钮
            showNext:true,//是否显示下一页按钮
            showTurn:true,//是否显示跳转,默认显示
            showSumNum:true,//是否显示总页码
            showNear:2,//显示当前页码前多少页和后多少页,默认2
            pageSwap:true,//是否同意调剂,默认是。调剂会最大数量显示页码。例如当前页码之前无页码可以显示。则会增加之后的页码。
            align:'right'//对齐方式。默认右对齐.可选:left,right
        }

        所有数据参数。pageCount是多少页

        天天0
        2017/7/11 11:12:00
        怎么根据后台传过来的值附给pageCount,而不是自己写一个值,可是后台传过来的ajax部分写在里面呀,定义的conut取不到
        kmh02280
        2017/7/11 11:20:57

        如果你后台传过来的是总页码和单个页面的数据。此方法不适用。此方法主要用于把全部数据分页的。

    回复
    叶帆 0
    2017/6/19 21:54:18

    这个方法在初始化后就会调用一次,怎样可以改成只有点击的时候再调用

        kmh02281
        2017/6/21 16:18:20

        ?初始化的时候你得显示一页吧!!不想显示的话,把146行改成

        if (this.filled) {
            this.fn && this.fn(args.current);
        }
        this.filled = true;
    回复
    @晴天 0
    2017/6/15 16:05:53
    大神,怎么定义每页显示几条?
        @晴天0
        2017/6/15 16:14:12
        我想错了。我再试试。
        kmh02280
        2017/6/15 17:22:19

        嗯。回掉函数参数只是页码。

    回复
    ?取次花丛、 0
    2017/6/14 15:54:49

    怎么下载啊

        kmh02280
        2017/6/15 17:20:53
        点击开始下载
    回复
取消回复