Div Li's multiple-row, multiple-column, no-refresh paging sample code _php Tips

The paging file loads all the content at once, so it is not very suitable for large web sites, but it is suitable for less data.
The database is not used in this example.

PHP Code

Copy Code code as follows:

<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>
[/code]
CSS Code

Copy Code code as follows:

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

This example also uses a JS jquery.pages.js please go to the demo page to view the source code