jquery动态添加数据，数据分页

第一：html页面

<div class="global_module prolist">
<h3>新款上市</h3>
<div class="prolist_content">
<ul id="newProlist">

</ul>
</div>
</div>//添加产品数据
<div class="holder"> </div>//分页控件
第二：css样式
.global_module .prolist{
width:950px;
height:300px;
}
.prolist_content ul{
padding:0;
margin:0;
}
.prolist_content ul li{
float:left;
margin:10px 0 10px 11px;
border:1px solid #CCCCCC;
}
.prolist_content ul li img{
width:180px;
height:250px;
}
.prolist_content ul li span{
font-size:14px;
margin:10px 0 0 10px;/*margin:上 右 下 左*/
}
.prolist_content .Tname{
display: block;
width:170px;
}
.prolist_content .address{
color:#BBBBBB;
font-size:12px;
float:right;
margin:0 10px 0 0;
}
.prolist_content ul li span em{
font-size:18px;
color:red;
font-weight: bold;
}

第三：js文件
newStyle.txt

//main页面右侧产品列表模块
var prolist="";
$.ajax({
type:"GET",
url:"json/newStyle.txt",
dataType:"JSON",
success:function(data){
$.each(data,function(i,n){
prolist+="<li><a href='"+n["href"]+"'><img src='"+n["src"]+"'/></a><br/><span class='"
+n["nameClass"]+"'><a href='"+n["href"]+"'>"+n["optionValue"]+"</a></span><br/><span>$<em>"
+n["price"]+"</em></span><span class='"+n["addressClass"]+"'>"+n["addressText"]+"</span></li>";
});
$("#newProlist").html(prolist);
}
});

产品具体的所以数据都被保存在newStyle.txt文件中
[
{
"href":"detail.html",
"src":"images/T1.png",
"nameClass":"Tname",
"optionValue":"高支棉衬衫蓝色高支棉衬衫蓝色高支棉衬衫蓝色",
"price":"120",
"addressClass":"address",
"addressText":"广东 广州"
},
{
"href":"detail.html",
"src":"images/T1.png",
"nameClass":"Tname",
"optionValue":"高支棉衬衫蓝色高支棉衬衫蓝色高支棉衬衫蓝色1",
"price":"130",
"addressClass":"address",
"addressText":"广东 广州"
},
{
"href":"detail.html",
"src":"images/T1.png",
"nameClass":"Tname",
"optionValue":"高支棉衬衫蓝色高支棉衬衫蓝色高支棉衬衫蓝色2",
"price":"140",
"addressClass":"address",
"addressText":"广东 广州"
},
{
"href":"detail.html",
"src":"images/T1.png",
"nameClass":"Tname",
"optionValue":"高支棉衬衫蓝色高支棉衬衫蓝色高支棉衬衫蓝色3",
"price":"150",
"addressClass":"address",
"addressText":"广东 广州"
}
]
如需更多的数据，可再添加。

此外还需再引进jquery库

分页控件

//设计分页
$(function() {
$("div.holder").jPages({
containerID: "newProlist",//存放数据的容器id
previous: "上一页",
next: "下一页",
perPage: 15 //每一页中有15个数据
});
});添加jquery插件
<script type="text/javascript" src="script/jPages.js"></script>

分页的css样式

.holder {
margin: 15px 0;
text-align:center;
float:right;
padding-right:20px;
padding-top:20px;
width:300px;
}
.holder a {
font-size: 18px;
cursor: pointer;
margin: 0 5px;
color:#0287CA;
padding:2px 5px;
}
.holder a:hover {
background-color: #eee;
color: #FF4242;
}
.holder a.jp-previous { margin-right: 15px; }
.holder a.jp-next { margin-left: 15px; }
.holder a.jp-current, a.jp-current:hover {
color: #FF4242;
font-weight: bold;
}
.holder a.jp-disabled, a.jp-disabled:hover {
color: #eee;
}
.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; }

大概就是这样