编程 Javascript

layui分页效果实现代码

Posted in Javascript onMay 19, 2017

本文实例为大家分享了layui分页效果的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>分页</title>
  <link rel="stylesheet" href="layui/css/layui.css" >
 </head>
 <body>
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
   <legend>开门见山 ： 默认分页</legend>
  </fieldset>
  <div id="demo1"></div>
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
   <legend>开启 URL hash</legend>
  </fieldset>
  <div id="demo5"></div>

  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
   <legend>是时候看一下完整功能了！</legend>
  </fieldset>
  <div id="demo7"></div>

  <script src="layui/layui.js"></script>
  <script>
   layui.use(['laypage', 'layer'], function(){
    var laypage = layui.laypage
    ,layer = layui.layer;

    laypage({
     cont: 'demo1'
     ,pages: 100 //总页数
     ,groups: 5 //连续显示分页数
    });

    laypage({
     cont: 'demo5'
     ,pages: 100
     ,curr: location.hash.replace('#!fenye=', '') //获取hash值为fenye的当前页
     ,hash: 'fenye' //自定义hash值
    });
    laypage({
     cont: 'demo7'
     ,pages: 100
     ,skip: true
    });
   });
  </script>
 </body>
</html>

效果图：

layui分页效果实现代码

官网分页

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

layui分页效果实现代码

- Author -

广信_刘东君

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javaScript让文本框内的最后一个文字的后面获得焦点实现代码

Jan 06 Javascript

jquery写个checkbox——类似邮箱全选功能

Mar 19 Javascript

Javascript常用字符串判断函数代码分享

Dec 08 Javascript

JavaScript调试的多个必备小Tips

Jan 15 Javascript

浅谈webpack编译vue项目生成的代码探索

Dec 11 Javascript

vue项目关闭eslint校验

Mar 21 Javascript

vue服务端渲染添加缓存的方法

Sep 18 Javascript

element-ui多文件上传的实现示例

Apr 10 Javascript

微信小程序实现的图片保存功能示例

Apr 24 Javascript

layui数据表格跨行自动合并的例子

Sep 02 Javascript

微信小程序实现限制用户转发功能的实例代码

Feb 22 Javascript

vue整合百度地图显示指定地点信息

Apr 06 Vue.js

layui前段框架日期控件使用方法详解

May 19 #Javascript

详解Node.js开发中的express-session

May 19 #Javascript

前端页面文件拖拽上传模块js代码示例

May 19 #Javascript

jQuery操作之效果详解

May 19 #jQuery

AngularJS中的promise用法分析

May 19 #Javascript

几种响应式文字详解

May 19 #Javascript

关于Bootstrap按钮组件消除黄框的方法

May 19 #Javascript