JQ分页插件

所属分类:导航-分页

JQ分页插件 ie兼容8

更新时间:2017/12/10 下午6:52:27

更新说明:

1. 增加了一个预设的样式,可以直接拿来使用,可以关闭或开启(默认关闭)。

2. 修复了原来的缺陷,比如 不可以同时用2分页插件、自定义属性占用的问题、预设的点击的页码css样式等

3. 增加了一个min压缩版本,比原版小40%,一行代码加载更快。

4. 增加了大量可预设的属性,可以在HTML全部预设好不必再打开JS文件


Page是一个基于JQ编写的分页插件

开始使用:

$(*).Page({type},class);

* 写入要插件要出现的HTML容器位置,{type}则是配置属性。比如:

$('body').Page({});

会出现body标签位置,并且会清除body内所有内容,calss是预设的css样式只要回执true就可以使用。 

兼容性:里面基本没有用到css3的地方,代码全部基于jq编写 使用最新版就好,浏览器兼容 IE 78910 应该都没问题 其他最新就好。 

常用配置属性更多查看js文件

$(".paging").Page({
    page:1, // 当前页 默认第一页
    pages:false, // 总页数 !必须配置 否则没有页数
    pageNum:5, // 页码数 共显示多少个页码 默认5 建议设置 奇数 比较美观
    search:true, // 是否跳转功能 true未开启 false为关闭 默认开启
    TopDownpage:true, // 是否开启上一页 下一页功能 true未开启 false为关闭 默认开启
    pageOn:false, // 点击页码时触发事件,默认关 建议填写!格式 pageOn:function(e){/* 你要 执行的代码*/}
    searchOn:false, //点击跳转时触发事件,默认关 建议填写!格式 searchOn:function(e){/* 你要 执行的代码*/}
});

结构

<-div-> html 容器 
    <-ul-> /* 页码区 
        <-li->页码<-/li-> 
    <-/ul->*/ 页码区结束 
    <-ul-> /* 跳转区 
        <-input->输入框 
        <-input->跳转按钮 
    <-/ul->*/ 跳转区结束
<-/div->html 容器结束

运用

$(".paging").Page({
            Pages: < - ? -php echo(总页数); - ? - > ,
            PageOn : function(e) {
                $.post(".php", {
                            传递的页码: e
                        }, function(data) {
                            $(要更新的容器).html(data)
                        }
                    },
                    JumpOn: function(e) {
                        $.post(".php", {
                                传递的页码: e
                            }, function(data) {
                                $(要更新的容器).html(data)
                            }
                        },
                    }, true);

这样就可以完成一个静态页面的刷新,简单的很~!

详情看 压缩包 内的HTML文件,这是写网站时需要,就写了一个插件,兼容性没有问题,建议使用最新的JQ库。

使用插件只需要导入Js文件后,再添加你的CSS样式就大功告成了!

相关插件-分页

简单的Vue分页插件pagination.js

分页插件,带省略的Vue分页插件
  分页
 10265  39

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

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

官网分页特效

官网分页特效
  分页
 13822  82

实用的分页插件zxf_page.js

基于jquery的分页插件
  分页
 13841  75

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

    hoichunleung 0
    2018/1/3 14:45:40
    晴天毒药 0
    2017/12/26 17:44:50
    PageOn: function(e) {
            $.post(".php", {
                    传递的页码: e
                }, function(data) {
                    $(要更新的容器).html(data)
                }
            }

    我想让第一页的容器内显示1,改怎么改

        杨小样同学的快乐生活1
        2017/12/28 21:06:22

        如果是 1.. 这个变成1 需要改下代码,

        在81行

         $Page.prepend($(PageSon).attr(Config.PageCustom, 1).text("1..").attr("title", Config.PageTitle.replace(/x/g, "1")));
         text("1..")

         这个是第一页显示的内容

        78行

        $Page.append($(PageSon).attr(Config.PageCustom, Config.Pages).text(".." + Config.Pages).attr("title", Config.PageTitle.replace(/x/g, Config.Pages)));
        text(".." + Config.Pages)

        这个是最后一页 显示的内容,Config.Pages 是最后一个页码的变量对象

    回复
    杨鑫 0
    2017/12/14 10:31:46

    可以的很好哟

        杨小样同学的快乐生活0
        2017/12/14 18:24:50

        谢谢

    回复
取消回复