如何實(shí)現(xiàn)layui分頁(yè)效果

發(fā)布時(shí)間：2021-06-29 09:17:42 來(lái)源：億速云閱讀：147 作者：小新欄目：web開(kāi)發(fā)

這篇文章主要介紹了如何實(shí)現(xiàn)layui分頁(yè)效果，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

具體內(nèi)容如下

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>分頁(yè)</title>
  <link rel="stylesheet" href="layui/css/layui.css" >
 </head>
 <body>
  <fieldset class="layui-elem-field layui-field-title" >
   <legend>開(kāi)門(mén)見(jiàn)山 ： 默認(rèn)分頁(yè)</legend>
  </fieldset>
  <div id="demo1"></div>
  <fieldset class="layui-elem-field layui-field-title" >
   <legend>開(kāi)啟 URL hash</legend>
  </fieldset>
  <div id="demo5"></div>

  <fieldset class="layui-elem-field layui-field-title" >
   <legend>是時(shí)候看一下完整功能了！</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 //總頁(yè)數(shù)
     ,groups: 5 //連續(xù)顯示分頁(yè)數(shù)
    });

    laypage({
     cont: 'demo5'
     ,pages: 100
     ,curr: location.hash.replace('#!fenye=', '') //獲取hash值為fenye的當(dāng)前頁(yè)
     ,hash: 'fenye' //自定義hash值
    });
    laypage({
     cont: 'demo7'
     ,pages: 100
     ,skip: true
    });
   });
  </script>
 </body>
</html>

效果圖：

如何實(shí)現(xiàn)layui分頁(yè)效果

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何實(shí)現(xiàn)layui分頁(yè)效果”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

向AI問(wèn)一下細(xì)節(jié)

如何實(shí)現(xiàn)layui分頁(yè)效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽