layui分页效果实现代码

本文实例为大家分享了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>

效果图：

官网分页

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

赞 (0)

相关推荐

  • 深入理解jQuery layui分页控件的使用

    $.getJSON( )的使用方法简介 $.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] ) url是必选参数,表示json数据的地址: data是可选参数,用于请求数据时发送数据参数: success是可参数,这是一个回调函数,用于处理请求到的数据. //内容页面 <br> <div id="notice_div"></div><br> //分页控件 <d

  • 基于LayUI实现前端分页功能的方法

    基于LayUI实现前端分页功能的方法

    一.LayUI介绍 Layui 是一款采用自身模块规范编写的国产前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用.内置了一些常用元素和组件的UI框架. 下载地址为http://www.layui.com/,下载后引入项目中. <link rel="stylesheet" href="${pageContext.request.contextPath}/css/layui/css/layui.css" rel="exte

  • 前端分页功能的实现以及原理（jQuery）

    分页场景常见于电商网站,比如说淘宝天猫的评论区,分页功能一般是后台实现,前端请求就完事了.现闲得无聊,就写出来玩玩,只实现功能,并未封装. 基于jq实现分页功能,大致分为以下几步: 定义一个分页方法,可多次调用 参数设置 请求数据页面跳转方法 创建非数字按钮和数据内容区 创建数字按钮 首屏加载 调用 结构层只需要一个容器 <div class="pagination-nick"></div> 一.定义分页方法 function paginationNick(op

  • layui分页效果实现代码

    layui分页效果实现代码

    本文实例为大家分享了layui分页效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>分页</title> <link rel="stylesheet" href="layui/css/layui.css" > </head> <body

  • vue+Element-ui实现分页效果实例代码详解

    当我们向后台请求大量数据的时候,并要在页面展示出来,请求的数据可能上百条数据或者更多的时候,并不想在一个页面展示,这就需要使用分页功能来去完成了. 1.本次所使用的是vue2.0+element-ui实现一个分页功能,element-ui这个组件特别丰富,分页中给我提供了一个Pagination 分页,使用Pagination 快速完成分页功能 最终效果展示 <div class="deit"> <div class="crumbs"> &l

  • mybatis分页效果实现代码

    mybatis分页效果实现代码

    本文为大家分享了mybatis分页效果展示的具体代码,供大家参考,具体内容如下 mybatis版本3.4以下 结构: spring-mvc.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.springframework.org

  • Spring Boot和Thymeleaf整合结合JPA实现分页效果(实例代码)

    Spring Boot和Thymeleaf整合结合JPA实现分页效果(实例代码)

    在项目里,我需要做一个Spring Boot结合Thymeleaf前端模版,结合JPA实现分页的演示效果.做的时候发现有些问题,也查了现有网上的不少文档,发现能全栈实现的不多,所以这里我就把我的做法,全部代码和步骤贴出来供大家参考. 1 创建项目,用pom.xml引入依赖 这里将创建名为ThymeleafWithDB的Maven,在pom.xml里引入如下的依赖包. <dependencies> <dependency> <groupId>org.springframe

  • js下通过getList函数实现分页效果的代码

    用js实现页面的分页: 复制代码 代码如下: <table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color:#D2EBF3;" height="32"> <tr><td align="right" bgColor="#

  • layui选项卡效果实现代码

    layui选项卡效果实现代码

    本文实例为大家分享了layui选项卡的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选项卡</title> <link rel="stylesheet" href="layui/css/layui.css"> </head> <body&

  • 基于ssm框架实现layui分页效果

    基于ssm框架实现layui分页效果

    今天完成了基于ssm框架下,layui的分页操作,现在把核心内容分享一下: 1.前端页面的关键代码,基于html5 <!--自动渲染--> <table class="layui-table" lay-data="{cellMinWidth:100, height:'full-500', url:'meter/query', page:true, id:'idTest'}" lay-filter="demo"> <t

  • mybatis中oracle实现分页效果实例代码

    mybatis中oracle实现分页效果实例代码

    首先当我们需要通过xml格式处理sql语句时,经常会用到< ,<=,>,>=等符号,但是很容易引起xml格式的错误,这样会导致后台将xml字符串转换为xml文档时报错,从而导致程序错误. 这样的问题在iBatiS中或者自定义的xml处理sql的程序中经常需要我们来处理.其实很简单,我们只需作如下替换即可避免上述的错误: 原符号  <  <=   > >=  & '  " 替换符号 < <= > >= & &a

  • NodeJS和BootStrap分页效果的实现代码

    NodeJS和BootStrap分页效果的实现代码

    1.数据处理 首先在动态js中,根据url参数获取数据库文档的数量,设置分页的大小,获取当前页面的数据,然后将文档数量pagecount,分页大小pagesize,以及当前页面currentpage传递到页面中. 2.处理分页效果 我采用的是JavaScript动态生成的,你也可以利用ejs支持函数的特性将其封装后生成html形式的分页. 首先,添加分页ul,在你的页面中需要显示的位置添加代码: <ul class="pagination" id="pagination

  • jquery实现的伪分页效果代码

    jquery实现的伪分页效果代码

    本文实例讲述了jquery实现的伪分页效果代码.分享给大家供大家参考,具体如下: 这里介绍的jquery伪分页效果,在火狐下表现完美,IE全系列下有些问题,引入了jQuery1.7.2插件,代码里有丰富的注释,相信对学习jQuery有不小的帮助,期待大家关注. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-pic-mn-page-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W

随机推荐