昨天项目手机端要用到table的分页，考虑到手机端界面小，系统数据不多，在没考虑大批量数据处理的前提前就下载了这个插件，简单。
展示数据datas为json格式。
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="page.css" type="text/css" rel="stylesheet"/>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="page.js"></script>
</head>
<body>
<table id="demoContent" border="1">
</table>
<ul class="page" id="page"></ul>
</body>
</html>
<script type="text/javascript">
var datas=[
{"did":1,"name":"又降价！Intel狂推首款可超频i3 中国特供","price":36,"img_sm":"p0281.jpg","material":"明虾、番茄酱、白糖、白醋、葱、姜、淀粉"},
{"did":2,"name":"父子俩野营时喂了一只野猫 打开帐篷震惊","price":16.5,"img_sm":"p2679.jpg","material":"切片吐司、紫薯、铁棍山药、糖桂花、炼乳"},
{"did":3,"name":"iPhone 7为啥卖不动？终于知道了！","price":32,"img_sm":"p8489.jpg","material":"三黄鸡、杭椒、干红椒、新鲜小米椒、麻椒、八角、香叶、葱、姜、生抽"},
{"did":4,"name":"7吨超美国！中国革命性大卫星领先世界1代","price":36,"img_sm":"p0281.jpg","material":"明虾、番茄酱、白糖、白醋、葱、姜、淀粉"},
{"did":5,"name":"昨晚全世界都被杭州美哭了(图)","price":16.5,"img_sm":"p2679.jpg","material":"切片吐司、紫薯、铁棍山药、糖桂花、炼乳"},
{"did":6,"name":"A系处理器成历史！苹果从零自研GPU","price":32,"img_sm":"p8489.jpg","material":"三黄鸡、杭椒、干红椒、新鲜小米椒、麻椒、八角、香叶、葱、姜、生抽"},
{"did":7,"name":"黑科技让NVMe SSD性能爆炸！再不浪费容量","price":36,"img_sm":"p0281.jpg","material":"明虾、番茄酱、白糖、白醋、葱、姜、淀粉"},
{"did":8,"name":"都是泪！QQ最新大数据：年轻人看完沉默了","price":16.5,"img_sm":"p2679.jpg","material":"切片吐司、紫薯、铁棍山药、糖桂花、炼乳"},
{"did":9,"name":"特斯拉什么车都要造：但就是不造它","price":32,"img_sm":"p8489.jpg","material":"三黄鸡、杭椒、干红椒、新鲜小米椒、麻椒、八角、香叶、葱、姜、生抽"},
{"did":10,"name":"新一代宝马X4首次现身：内外大换血！","price":36,"img_sm":"p0281.jpg","material":"明虾、番茄酱、白糖、白醋、葱、姜、淀粉"},
{"did":11,"name":"又降价！Intel狂推首款可超频i3 中国特供","price":36,"img_sm":"p0281.jpg","material":"明虾、番茄酱、白糖、白醋、葱、姜、淀粉"},
{"did":12,"name":"父子俩野营时喂了一只野猫 打开帐篷震惊","price":16.5,"img_sm":"p2679.jpg","material":"切片吐司、紫薯、铁棍山药、糖桂花、炼乳"},
{"did":13,"name":"iPhone 7为啥卖不动？终于知道了！","price":32,"img_sm":"p8489.jpg","material":"三黄鸡、杭椒、干红椒、新鲜小米椒、麻椒、八角、香叶、葱、姜、生抽"},
{"did":14,"name":"7吨超美国！中国革命性大卫星领先世界1代","price":36,"img_sm":"p0281.jpg","material":"明虾、番茄酱、白糖、白醋、葱、姜、淀粉"},
{"did":15,"name":"昨晚全世界都被杭州美哭了(图)","price":16.5,"img_sm":"p2679.jpg","material":"切片吐司、紫薯、铁棍山药、糖桂花、炼乳"},
{"did":16,"name":"A系处理器成历史！苹果从零自研GPU","price":32,"img_sm":"p8489.jpg","material":"三黄鸡、杭椒、干红椒、新鲜小米椒、麻椒、八角、香叶、葱、姜、生抽"},
{"did":17,"name":"黑科技让NVMe SSD性能爆炸！再不浪费容量","price":36,"img_sm":"p0281.jpg","material":"明虾、番茄酱、白糖、白醋、葱、姜、淀粉"},
{"did":18,"name":"都是泪！QQ最新大数据：年轻人看完沉默了","price":16.5,"img_sm":"p2679.jpg","material":"切片吐司、紫薯、铁棍山药、糖桂花、炼乳"},
{"did":19,"name":"特斯拉什么车都要造：但就是不造它","price":32,"img_sm":"p8489.jpg","material":"三黄鸡、杭椒、干红椒、新鲜小米椒、麻椒、八角、香叶、葱、姜、生抽"},
{"did":20,"name":"新一代宝马X4首次现身：内外大换血！","price":36,"img_sm":"p0281.jpg","material":"明虾、番茄酱、白糖、白醋、葱、姜、淀粉"},
{"did":21,"name":"二十四节气怎样来的？老祖宗真智慧","price":32,"img_sm":"p8489.jpg","material":"三黄鸡、杭椒、干红椒、新鲜小米椒、麻椒、八角、香叶、葱、姜、生抽"}
];
var options={
"id":"page",//显示页码的元素
"data":datas,//显示数据
"maxshowpageitem":3,//最多显示的页码个数
"pagelistcount":2,//每页显示数据个数
"callBack":function(result){
var cHtml="";
for(var i=0;i<result.length;i++){
cHtml+="<tbody><tr><td>"+ result[i].did +"</td><td>"+result[i].name+"</td><td>"+result[i].price+"</td><td>"+result[i].material+"</td></tr></tbody>";//处理数据
}
tablehtml="<thead><tr><th>"+‘序号‘+"</th><th>"+‘商品名称‘+"</th><th>"+‘价格‘+"</th><th>"+‘备注‘+"</th></tr></thead>"+cHtml;
$("#demoContent").html(tablehtml);//将数据增加到页面中
}
};
page.init(datas.length,1,options);
</script>
插件分享地址：
链接: https://pan.baidu.com/s/1dF3uJdB 密码: xy12
时间： 2024-12-18 09:46:46