编程 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 相关文章推荐

Chrome Form多次提交表单问题的解决方法

May 09 Javascript

javascript中的void运算符语法及使用介绍

Mar 10 Javascript

node.js中的querystring.escape方法使用说明

Dec 10 Javascript

js原生之焦点图转换加定时器实例

Dec 12 Javascript

js实现图片切换（动画版）

Dec 25 Javascript

JS实现图片预加载之无序预加载功能代码

May 12 Javascript

微信小程序wx.getImageInfo()如何获取图片信息

Jan 26 Javascript

Webpack中雪碧图插件使用详解

May 25 Javascript

Vue+element-ui 实现表格的分页功能示例

Aug 18 Javascript

在vue中安装使用vux的教程详解

Sep 16 Javascript

webpack-url-loader 解决项目中图片打包路径问题

Feb 15 Javascript

微信小程序调用微信支付接口的实现方法

Apr 29 Javascript

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