javascript實(shí)現(xiàn)json頁(yè)面分頁(yè)實(shí)例代碼
下午有個(gè)朋友問(wèn)json 數(shù)據(jù)怎么分頁(yè) 就搗鼓了一個(gè)東東出來(lái)
下面直接代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<script>
var a={"code":1,"list":[{"category1_id":"1","category1_name":"\u9152\u6c34\u996e\u6599","category1_intro":"\u6e05\u51c9\u53ef\u53e3\u7684\u9152\u6c34\u996e\u6599","category1_images":"http:\/\/www.songcuomen.com\/attachments\/productType\/2014-01\/10\/21_1389343628.jpg"},{"category1_id":"2","category1_name":"\u7c73\u9762\u7cae\u6cb9","category1_intro":"\u5bb6\u5ead\u5fc5\u5907","category1_images":"http:\/\/www.songcuomen.com\/attachments\/productType\/2014-01\/10\/21_1389343865.jpg"},{"category1_id":"3","category1_name":"\u7f8e\u5bb9\u6d17\u62a4","category1_intro":"\u62a4\u80a4\u5fc5\u5907","category1_images":"http:\/\/www.songcuomen.com\/attachments\/productType\/2014-01\/10\/21_1389343935.jpg"},{"category1_id":"4","category1_name":"\u6e05\u6d01\u6d17\u6da4","category1_intro":"\u7ed9\u60a8\u4e00\u4e2a\u5e72\u51c0\u7684\u751f\u6d3b\u73af\u5883","category1_images":"http:\/\/www.songcuomen.com\/attachments\/productType\/2014-01\/10\/21_1389343986.jpg"},{"category1_id":"5","category1_name":"\u751f\u6d3b\u7528\u54c1","category1_intro":"\u5bb6\u5ead\u5fc5\u5907","category1_images":"http:\/\/www.songcuomen.com\/attachments\/productType\/2014-01\/10\/21_1389344445.jpg"},{"category1_id":"6","category1_name":"\u4f11\u95f2\u98df\u54c1","category1_intro":"\u597d\u5403\u7f8e\u5473","category1_images":"http:\/\/www.songcuomen.com\/attachments\/productType\/2014-01\/10\/21_1389344494.jpg"}]};
var y=1;//表示頁(yè)數(shù)
var t=2;//表示每頁(yè)現(xiàn)實(shí)幾條數(shù)據(jù)
var z=a["list"].length;
var zy= Math.ceil(z/t);
window.onload=function (){
fanye(0);
}
function fanye(f)
{
if(y==1 && f==-1)
{
alert('已經(jīng)是第一頁(yè)了');
f=0;
}
if(y==zy && f==1)
{
alert('已經(jīng)是最后一頁(yè)了');
f=0;
}
var otbod=document.getElementById('table').tBodies[0];
var s=otbod.rows.length;
for(i=0;i<s;i++)
{
otbod.removeChild(otbod.rows[0]);
}
y+=f;
var q=(y-1)*2;//頁(yè)數(shù)-1 乘以每頁(yè)現(xiàn)實(shí)多少條 結(jié)果為 本頁(yè)從第幾條開(kāi)始
for(var i=1;i<3;i++)
{
var otr=document.createElement('tr');
var otd1=document.createElement('td');
var otd2=document.createElement('td');
var otd3=document.createElement('td');
var otd4=document.createElement('td');
otd1.innerHTML=a["list"][q]['category1_id'];
otd2.innerHTML=a["list"][q]['category1_name'];
otd3.innerHTML=a["list"][q]['category1_intro'];
otd4.innerHTML=a["list"][q]['category1_images'];
otr.appendChild(otd1);
otr.appendChild(otd2);
otr.appendChild(otd3);
otr.appendChild(otd4);
otbod.appendChild(otr);
if(q==zy)
{
break;
}
q++;
}
}
</script>
</head>
<body>
<table border="1" id="table">
<thead>
<tr><td>category1_id</td><td>category1_name</td><td>category1_intro</td><td>category1_images</td></tr>
</thead>
<tbody>
</tbody>
</table>
<a href="javascript:fanye(1);">下一頁(yè)</a>
<a href="javascript:fanye(-1);">上一頁(yè)</a>
</body>
</html>
- 原生javascript實(shí)現(xiàn)的分頁(yè)插件pagenav
- JavaScript實(shí)現(xiàn)列表分頁(yè)功能特效
- javascript實(shí)現(xiàn)炫酷的拖動(dòng)分頁(yè)
- JavaScript分頁(yè)功能的實(shí)現(xiàn)方法
- javascript分頁(yè)代碼實(shí)例分享(js分頁(yè))
- javascript ajax 仿百度分頁(yè)函數(shù)
- javascript分頁(yè)代碼(當(dāng)前頁(yè)碼居中)
- JavaScript EasyPager 分頁(yè)函數(shù)
- javascript 支持頁(yè)碼格式的分頁(yè)類(lèi)
- 純JavaScript實(shí)現(xiàn)的分頁(yè)插件實(shí)例
相關(guān)文章
JavaScript使用prototype屬性實(shí)現(xiàn)繼承操作示例
這篇文章主要介紹了JavaScript使用prototype屬性實(shí)現(xiàn)繼承操作,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript使用prototype屬性實(shí)現(xiàn)繼承的相關(guān)原理、實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下2020-05-05JS實(shí)現(xiàn)仿中關(guān)村論壇評(píng)分后彈出提示效果的方法
這篇文章主要介紹了JS實(shí)現(xiàn)仿中關(guān)村論壇評(píng)分后彈出提示效果的方法,實(shí)例分析了javascript彈出特效的css與提示框的具體實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02JS報(bào)錯(cuò)Uncaught?TypeError:?XXX?is?not?a?function的解決方法
這篇文章主要給大家介紹了關(guān)于JS報(bào)錯(cuò)Uncaught?TypeError:?XXX?is?not?a?function的解決方法,本來(lái)好好的,突然就出現(xiàn)的錯(cuò)誤,不過(guò)這并不是什么難解決的錯(cuò)誤,需要的朋友可以參考下2023-08-08