通用編程之快速分頁代碼實現
阿新 • • 發佈：2018-04-17
快速分頁對於程序技術人員處理一些比較多的數據時，有時候一頁放不下，那麽這個時候往往要用到分頁顯示，就像平常我們翻看有一些新聞資訊一樣，有下一頁，下二頁等等，那麽今天跟大家分享的就是如何快速實現分頁技術，下面就進入到正題吧。
<title>Document</title>
<script src="jquery.min.js"></script>
<script src="fenye.js"></script>
<link rel="stylesheet" href="fenye.css">
// 有幾個分頁就寫幾個分頁
</div>
<div class="pages">
代碼實現部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.min.js"></script>
<script src="fenye.js"></script>
<link rel="stylesheet" href="fenye.css">
<style> main { width: 1024px; margin: 0 auto; } .fenye { padding: 10px; border: 1px solid red; margin: 10px 0; } .one { border: 1px solid black; margin: 30px 0; display: block; color: black; display: flex; justify-content: center; } .pages { border: 1px solid red; } </style>
</head>
<body>
<main>
<div class="main">
<div class="fenye">
<div class="one">1</div>
<div class="one">2</div>
<div class="one">3</div>
<div class="one">4</div>
<div class="one">5</div>
// 有幾個分頁就寫幾個分頁
</div>
<div class="pages">
</div>
</div>
</main>
<script>
// 需要引入Jquery
// 循環 上一頁下一頁的容器 每頁顯示幾個
fenye( $(".one"), $(".pages"), 4 )
</script></body>
</html>
那麽看完之後大家可以開始嘗試去實現以下了，如果還存在一些不清楚的地方的話，可以在下方留言咨詢我們，我們會很快幫您解答的。
本文由專業的鄭州app開發燚軒科技整理發布，如需轉載，請註明作者及原文出處!
通用編程之快速分頁代碼實現