插件描述：layPage是一款多功能的js分页组件，即适用于异步分页，又可用于传统的整页刷新跳页，还支持信息流加载，并且可无缝迁移至Node.js平台。layPage不依赖于任何第三方库，直接拿来用即可，它的接口继承了layui系列组件的一贯简洁，极易上手

layPage是一款多功能的js分页组件，即适用于异步分页，又可用于传统的整页刷新跳页，还支持信息流加载，并且可无缝迁移至Node.js平台。layPage不依赖于任何第三方库，直接拿来用即可，它的接口继承了layui系列组件的一贯简洁，极易上手。那么，从现在开始，将一切分页的任务交给layPage吧！

使用laypage

获得laypage包后，把整个文件存放到你的目录。直接script引入laypage.js即可，无需引入css。当然，你还可以通过seajs或者requirejs加载laypag。使用时请保留来源，感谢支持。

默认版对应代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//以下将以jquery.ajax为例，演示一个异步分页
function demo(curr){
    $.getJSON('test/demo1.json', {
        page: curr || 1 //向服务端传的参数，此处只是演示
    }, function(res){
        //此处仅仅是为了演示变化的内容
        var demoContent = (new Date().getTime()/Math.random()/1000)|0;
        document.getElementById('view1').innerHTML = res.content + demoContent;
        //显示分页
        laypage({
            cont: 'page1', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
            pages: res.pages, //通过后台拿到的总页数
            curr: curr || 1, //当前页
            jump: function(obj, first){ //触发分页后的回调
                if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
                    demo(obj.curr);
                }
            }
        });
    });
};
//运行
demo();

整页刷新式跳转

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//好像很实用的样子，后端的同学再也不用写分页逻辑了。
laypage({
    cont: 'page11',
    pages: 18, //可以叫服务端把总页数放在某一个隐藏域，再获取。假设我们获取到的是18
    curr: function(){ //通过url获取当前页，也可以同上（pages）方式获取
        var page = location.search.match(/page=(\d+)/);
        return page ? page[1] : 1;
    }(), 
    jump: function(e, first){ //触发分页后的回调
        if(!first){ //一定要加此判断，否则初始时会无限刷新
            location.href = '?page='+e.curr;
        }
    }
});

自定义皮肤

1
2
3
4
5
6
laypage({
    cont: document.getElementById('page2'), //容器。值支持id名、原生dom对象，jquery对象,
    pages: 100, //总页数
    skin: 'yahei', //加载内置皮肤，也可以直接赋值16进制颜色值，如:#c00
    groups: 7 //连续显示分页数
});

开启跳页

1
2
3
4
5
6
7
laypage({
    cont: $('#page3'), //容器。值支持id名、原生dom对象，jquery对象,
    pages: 100, //总页数
    skip: true, //是否开启跳页
    skin: '#AF0000',
    groups: 3 //连续显示分页数
});

自定义文本

1
2
3
4
5
6
7
8
9
laypage({
    cont: 'page4', //容器。值支持id名、原生dom对象，jquery对象,
    pages: 11, //总页数
    skin: 'molv', //皮肤
    first: 1, //将首页显示为数字1,。若不显示，设置false即可
    last: 11, //将尾页显示为总页数。若不显示，设置false即可
    prev: '<', //若不显示，设置false即可
    next: '>' //若不显示，设置false即可
});

隐藏首页和尾页

1
2
3
4
5
6
laypage({
    cont: 'page5', //容器。值支持id名、原生dom对象，jquery对象,
    pages: 11, //总页数
    first: false,
    last: false
});

开启hash

看看URL的变化。通过hash，你可以记录当前页。当前正处于第1页

1
2
3
4
5
6
7
8
9
laypage({
    cont: 'page6', //容器。值支持id名、原生dom对象，jquery对象,
    pages: 68, //总页数
    curr: location.hash.replace('#!fenye=', ''), //获取hash值为fenye的当前页
    hash: 'fenye', //自定义hash值
    jump: function(obj){
        $('#view6').html('看看URL的变化。通过hash，你可以记录当前页。当前正处于第'+obj.curr+'页');
    }
});

只出现上一页/下一页

1
2
3
4
5
6
7
8
9
10
laypage({
    cont: 'page7', //容器。值支持id名、原生dom对象，jquery对象,
    pages: 11, //总页数
    groups: 0,
    first: false,
    last: false,
    jump: function(obj){
        $('#view7').html('目前正在第'+ obj.curr +'页，一共有：'+ obj.pages +'页');
    }
});

js分页组件laypage相关推荐

  1. Vue.js分页组件实现：diVuePagination

    为什么80%的码农都做不了架构师?>>>    完整版下载地址:https://gitee.com/dgx/diVuePagination 完整版演示地址:http://dgx.gi ...

  2. layui分页组件layPage动态调整总页数

    我的小工程的前端使用了layui,这也是当时临时上网查到的一个框架,感觉风格简约,而且据称对后端开发人员很友好. 在使用layui的过程中,我遇到了一些问题,在这里将几个个人感觉比较棘手的问题列举一下 ...

  3. vue.js分页组件(新手学习记录)

    先说明页码总数是从接口返回的参数中获取的 页码是自己定义并赋值到url中,获取指定页的数据 首先新建一个page.vue组件 HTML部分,这里用了bootstrap4.0,就不去写样式了 <t ...

  4. vue php 分页组件,基于Vue.js的表格分页组件

    有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage.不了解Vue.js的童鞋可 ...

  5. 基于Vue.js的表格分页组件

    转载自 基于Vue.js的表格分页组件 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫Bo ...

  6. 电子商务系统的设计与实现(十三)：分页组件，从前到后，从JS到Java

    一.概述    学习实践Web开发5年多了,直到今天,我才算真正实现了最基本最常用的分页组件. 包括:     a.前端JS异步加载并渲染:     b.前端JSP.Freemarker.Struts ...

  7. ajax form表单提交_LayUI提交表单，监听select，分页组件

    1.LayUI提交表单 这几天做项目,用到提交layui框架的弹出层的表单,因为需要在提交表单后,关闭当前弹出层,同时刷新父窗口的数据,因此,用普通的提交就不行了,因为普通的提交到后台之后没有返回值, ...

  8. 基于jquery的php分页,基于jQuery封装的分页组件

    前言: 由于项目需要实现分页效果,上jQuery插件库找了下,但是木有找到自己想要的效果,于是自己封装了个分页组件. 思路: 主要是初始化时基于原型建立的分页模板然后绑定动态事件并实现刷新DOM的分页 ...

  9. Vue学习小案例--分页组件封装

    文章目录 Vue学习小案例--分页组件封装 修改成Vue(使用组件) Vue学习小案例–分页组件封装 index.html <!DOCTYPE html> <html lang=&q ...

  10. ES6公用分页组件的封装及应用举例

    ES6公用分页组件的封装及应用举例,以下源码使用到JQuery.Sass,重要的是方法,不合适可以根据自己的需要改改. 分页类 以下为pagination.js源码 import './paginat ...

最新文章

  1. 学python需要安装什么软件-学武汉Python培训课程需要安装什么软件？分享这10款...
  2. LeetCode 705. Design HashSet (设计哈希集合)
  3. 51单片机的复位引脚_51单片机复位电路工作原理
  4. linux禁止root用户直接登录sshd并修改默认端口
  5. chromebook刷机_如何将网站添加到您的Chromebook架子上
  6. 计算机网络考试目的是什么,计算机网络基本原理考试大纲 －、课程的性质及其设置的目的与要求.doc...
  7. 【补丁分析】CVE-2016-8610：对导致拒绝服务的“SSL Death Alert”漏洞补丁分析
  8. 关于路径的问题（以后会慢慢的补进来）
  9. arch开机自动认证
  10. 使用result配置结果视图
  11. C/C++[指针/引用]
  12. 工程之星位置服务器,工程之星5.0中求坐标转换参数需要谨记这七大点！
  13. 2022最新Postman安装以及基本操作使用教程
  14. 卡巴斯基携手微软MSN 卡巴斯基2010激活码免费领
  15. 【软件构造】过程与配置管理
  16. 人工智能课程设计——八皇后问题的求解算法比较
  17. 计算机专业职业战队,「团长分享」计算机系Meiko？画家小姜？如果选手没打职业……...
  18. Flyway 报错:Detected applied migration not resolved locally:2和执行脚本错误
  19. flutter学习笔记--传递信息
  20. 美国大力发展量子产业，国会直接指定能源部制定量子系统访问路线图

热门文章

  1. 让Google earth叠加中文地图
  2. window.opener 与 window.dialogArguments的用法
  3. 如何使用科来网络分析系统过滤数据包内容
  4. vs2019配置OpenGL教程
  5. Thymeleaf 生成静态化模板
  6. 问答WAP版重新改版上线
  7. 不加群提取群成员_快速提取PPT上的文字！
  8. php swf转image,gif转换swf|助你将gif图片转换成swf(flash)文件
  9. NI CompactRIO嵌入式系统开发流程总结
  10. fedora mysql安装教程,Fedora 14 上MySQL的安装及使用