php记录集多行多列分页,PHP利用div li的多行多列 无刷新分页的简单示例

这篇文章主要为大家详细介绍了PHP利用div li的多行多列 无刷新分页的简单示例，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随512笔记的小玲来看看吧！翻页文件一次加载了全部的内容，因而不是很适合大型的网站，而适用于数据比较少的情况。

本例未使用数据库。

PHP Code

代码如下:

/* 512笔记 www.512Pic.com */

for ($i=1; $i<=53; $i++){?>

<?php

/* 512笔记 www.512Pic.com */

echo $i?>

/* 512笔记 www.512Pic.com */

}?>

JavaScript Code

$(document).ready(function() {

$("div.holder").jPages({

containerID : "content",

perPage: 6

});

});

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; }

本例还使用了一个js jquery.pages.js 请到演示页面查看源码

注：关于PHP利用div li的多行多列 无刷新分页的简单示例的内容就先介绍到这里，更多相关文章的可以留意512笔记的其他信息。

关键词：分页