简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > js教程 > 正文

layui分页效果实现代码分享

小云云
发布： 2018-01-11 17:01:22
原创
3658 人浏览过

本文主要为大家详细介绍了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>
  <p id="demo1"></p>
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
   <legend>开启 URL hash</legend>
  </fieldset>
  <p id="demo5"></p>

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

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

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

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

效果图：

相关推荐：

简单实现Ajax无刷新分页效果

PHP仿Google分页效果的函数实例

php实现分页效果的示例

以上是layui分页效果实现代码分享的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：
layui 代码 实现
来源：php.cn
上一篇：layui弹出层效果代码分享 下一篇：layui前端框架日期控件使用方法
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
我的表单的数据不能识别，可以帮我看看是哪里出了问题吗 <div class="layadmin-user-login-boxlayadmin-user-login-bodylayui-form"> &l...
来自于 2023-10-08 09:31:17
0
2
122
请问老师有没有layui 的开发文档 请问老师有没有layui 的开发文档,layui 官网下架了
来自于 2023-02-27 12:16:24
0
1
384
TP6教程问题 按照教程做，但是拷贝的html显示和视频教程不一样，并且导入layui也没用
来自于 2022-01-17 10:36:36
0
2
780
html按教程拷贝进去，问题 html按教程拷贝进去，只一行一行显示文字，不是视频的显示格式，加载layui也加载不出
来自于 2022-01-17 10:31:03
0
1
707
layui加载不出 layui加载不出
来自于 2022-01-16 23:06:24
0
4
865
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！