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了。更多功能可见附件里的参数。

相关插件-分页

bootStrap 分页组件

一个简单的demo,可以根据页数回调要执行的函数
  分页
 73540  80

jQuery分页插件jPages

jPages是一个客户端分页插件,它比其他大多数插件多了很多功能,比如自动翻页,滚动浏览,显示延迟,完全可定制的导航面板也集成项目与Animate.css和延迟加载。
  分页
 200546  125

jQuery分页排序插件jPList

jPList是一个灵活的jQuery插件,支持排序、分页和过滤的HTML结构(DIVs, UL/LI, tables,等等)。
  分页
 24325  50

简单实用的jQuery分页插件Page

一个简单实用的jQuery分页插件,功能齐全,选择你需要的配置
  分页
 25155  44

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

    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
        点击开始下载
    回复
    ? Mr. lee 0
    2017/5/8 17:31:48

    哎呀我曹   太好用了 真特么太好用了 !!简直了 

    作者太牛逼了  我要嫁给你!!!

        ? Mr. lee0
        2017/5/8 17:33:56

        作者太牛逼了  

        让骚军 给你生一群猴子!!

        ?取次花丛、0
        2017/6/14 17:39:04

        怎么下载啊

    回复
取消回复