javascript實(shí)現(xiàn)json頁面分頁實(shí)例代碼
更新時(shí)間：2014年02月20日 15:16:29 作者：
這篇文章主要介紹了javascript實(shí)現(xiàn)json頁面分頁實(shí)例代碼,需要的朋友可以參考下
下午有個(gè)朋友問json 數(shù)據(jù)怎么分頁 就搗鼓了一個(gè)東東出來
下面直接代碼：
復(fù)制代碼 代碼如下:
<!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>無標(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;//表示頁數(shù)
var t=2;//表示每頁現(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)是第一頁了');
f=0;
}
if(y==zy && f==1)
{
alert('已經(jīng)是最后一頁了');
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;//頁數(shù)-1 乘以每頁現(xiàn)實(shí)多少條 結(jié)果為 本頁從第幾條開始
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);">下一頁</a>
<a href="javascript:fanye(-1);">上一頁</a>
</body>
</html>
您可能感興趣的文章:
- 原生javascript實(shí)現(xiàn)的分頁插件pagenav
- JavaScript實(shí)現(xiàn)列表分頁功能特效
- javascript實(shí)現(xiàn)炫酷的拖動(dòng)分頁
- JavaScript分頁功能的實(shí)現(xiàn)方法
- javascript分頁代碼實(shí)例分享(js分頁)
- javascript ajax 仿百度分頁函數(shù)
- javascript分頁代碼(當(dāng)前頁碼居中)
- JavaScript EasyPager 分頁函數(shù)
- javascript 支持頁碼格式的分頁類
- 純JavaScript實(shí)現(xiàn)的分頁插件實(shí)例
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了JS表格組件神器bootstrap table使用指南，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要介紹了JS實(shí)現(xiàn)的排列組合算法,結(jié)合完整實(shí)例形式詳細(xì)分析了排列組合算法的原理與javascript相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-07-07
這篇文章主要為大家詳細(xì)介紹了小程序表單認(rèn)證布局及驗(yàn)證的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
JavaScript表單驗(yàn)證實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了JavaScript表單驗(yàn)證的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
JavaScript高階函數(shù)_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了JavaScript高階函數(shù)，詳細(xì)講解了什么是高階函數(shù)和高階函數(shù)的用法，有興趣的可以了解下2017-06-06
微信小程序?qū)崿F(xiàn)點(diǎn)擊卡片 翻轉(zhuǎn)效果
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)點(diǎn)擊卡片 翻轉(zhuǎn)效果本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
Javascript實(shí)現(xiàn)顏色rgb與16進(jìn)制轉(zhuǎn)換的方法
這篇文章主要介紹了Javascript實(shí)現(xiàn)顏色rgb與16進(jìn)制轉(zhuǎn)換的方法,實(shí)例分析了顏色值轉(zhuǎn)換的常用技巧與使用方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
JavaScript獲取一個(gè)范圍內(nèi)日期的方法
這篇文章主要介紹了JavaScript獲取一個(gè)范圍內(nèi)日期的方法,涉及javascript操作日期的相關(guān)技巧,需要的朋友可以參考下2015-04-04
微信小程序商城項(xiàng)目之側(cè)欄分類效果(1)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崙?zhàn)商城系列之側(cè)欄分類效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
layui-select動(dòng)態(tài)選中值的例子
今天小編就為大家分享一篇layui-select動(dòng)態(tài)選中值的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09