layui laypage分页多种效果代码
代码语言:html
所属分类:其他
代码描述:layui laypage分页多种效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/layui/css/layui.css"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/layui/layui.all.js"></script> <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 --> </head> <body> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>总页数低于页码总数</legend> </fieldset> <div id="demo0"></div> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>总页数大于页码总数</legend> </fieldset> <div id="demo1"></div> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>自定义主题 - 颜色随意定义</legend> </fieldset> <div id="demo2"></div> <div id="demo2-1"></div> <div id="demo2-2"></div> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>自定义首页、尾页、上一页、下一页文本</legend> </fieldset> <div id="demo3"></div> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>不显示首页尾页</legend> </fieldset> <div id="demo4"></div> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>开启HASH</legend> </fieldset> <div id="demo5"></div> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>只显示上一页、下一页</legend> </fieldset> <div id="demo6"></div> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>显示完整功能</legend> </fieldset> <div id="demo7"></div> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>自定义排版</legend> </fieldset> <div id="demo8"></div> <div id="demo9"></div> <div id="demo10"></div> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>自定义每页条数的选择项</legend> </fieldset> <div id="demo11"></div> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>将一段已知数组分页展示</legend> </fieldset> <div id="demo20"></div> <ul id="biuuu_city_list"></ul> <!-- 注意:如果你直接复制所有代码到本地,上述 JS 路径需要改成你本地的 --> <script> layui.use(['laypage', 'layer'], function(){ var laypage = layui.laypage ,layer = layui.layer; //总页数低于页码总数 laypage.render({ elem: 'demo0' ,count: 50 //数据总数 }); //总页数大于页码总数 laypage.render({ elem: 'demo1' ,count: 70 //数据总数 ,jump: function(obj){ console.log(obj) } }); //自定义样式 laypage.render({ elem: 'demo2' ,count: 100 ,theme: '#1E9FFF' }); laypage.render({ elem: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0