div li的多行多列无刷新分页

最新推荐文章于 2022-04-22 16:44:30 发布

最新推荐文章于 2022-04-22 16:44:30 发布 · 156 阅读

文章标签：

#php #javascript #数据库 #ViewUI

本文介绍了一种divli元素的多行多列无刷新分页技术，通过结合PHP、JavaScript和CSS，实现了数据较少情况下的高效分页。演示代码包括分页容器、内容加载和翻页功能，特别强调了无需刷新页面即可实现内容滚动展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

div li的多行多列无刷新分页

本例与《Jquery一页内翻页,类似于无刷新分页》很相近而区别与其他本站发布的翻页代码

翻页文件一次加载了全部的内容，因而不是很适合大型的网站，而适用于数据比较少的情况。

本例未使用数据库。

演示

   PHP Code
  
   <div class="container">  
  
        <ul id="content">  
            <?php for ($i=1; $i<=53; $i++){?>  
            <li><span><?php echo $i?></span></li>  
            <?php }?>  
        </ul>  
        <div class="holder"></div>  
    </div>

   JavaScript Code
  

   <script type="text/javascript">  
$(document).ready(function() {  
    $("div.holder").jPages({  
        containerID : "content",  
        perPage: 6  
    });  
});  
</script>  

  

css

   CSS Code
  

   body {  
  text-align: left;  
  direction: ltr;  
  font-family:tahoma,verdana,arial,sans-serif;  
  font-size: 11px;  
}  
  
  
  
  
  
.container {  
  width: 370px;  
  height: 100%;  
  margin: 0 auto;  
  
}  
  
  
  
/* 
  @@ Demo 
*/  
ul {  
  margin: 0;  
  padding: 20px 0px;  
}  
  
ul li {  
  list-style-type: none;  
  display: inline-block;  
  line-height: 100px;  
  text-align: center;  
  font-weight: bold;  
  width: 100px;  
  height: 100px;  
  margin: 10px;  
  background: #ccc;  
}  
  
ul li span {  
  color: #fff;  
  padding: 3px;  
}  
  
/* 
  @@ Pagination 
*/  
.holder { margin: 5px 0; }  
  
.holder a {  
  font-size: 12px;  
  cursor: pointer;  
  margin: 0 5px;  
  color: #333;  
}  
  
.holder a:hover {  
  background-color: #222;  
  color: #fff;  
}  
  
.holder a.jp-previous { margin-right: 15px; }  
.holder a.jp-next { margin-left: 15px; }  
  
.holder a.jp-current, a.jp-current:hover {   
  color: #ed4e2a;  
  font-weight: bold;  
}  
  
.holder a.jp-disabled, a.jp-disabled:hover { color: #bbb; }  
  
.holder a.jp-current, a.jp-current:hover,  
.holder a.jp-disabled, a.jp-disabled:hover {  
  cursor: default;   
  background: none;  
}  
  
.holder span { margin: 0 5px; }  

  