欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript實(shí)現(xiàn)json頁(yè)面分頁(yè)實(shí)例代碼

 更新時(shí)間:2014年02月20日 15:16:29   作者:  
這篇文章主要介紹了javascript實(shí)現(xiàn)json頁(yè)面分頁(yè)實(shí)例代碼,需要的朋友可以參考下

下午有個(gè)朋友問(wèn)json 數(shù)據(jù)怎么分頁(yè) 就搗鼓了一個(gè)東東出來(lái)

下面直接代碼:

復(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>無(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>

相關(guān)文章

  • 詳解JavaScript原型與原型鏈

    詳解JavaScript原型與原型鏈

    這篇文章主要介紹了JavaScript原型與原型鏈的相關(guān)資料,幫助大家更好的理解和學(xué)習(xí)JavaScript,感興趣的朋友可以了解下
    2020-11-11
  • Email地址加密javascript版

    Email地址加密javascript版

    Email地址加密javascript版...
    2006-08-08
  • JavaScript使用prototype屬性實(shí)現(xià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-05
  • 淺談JS中的常用選擇器及屬性、方法的調(diào)用

    淺談JS中的常用選擇器及屬性、方法的調(diào)用

    下面小編就為大家?guī)?lái)一篇淺談JS中的常用選擇器及屬性、方法的調(diào)用。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-07-07
  • JS實(shí)現(xiàn)仿中關(guān)村論壇評(píng)分后彈出提示效果的方法

    JS實(shí)現(xiàn)仿中關(guān)村論壇評(píng)分后彈出提示效果的方法

    這篇文章主要介紹了JS實(shí)現(xiàn)仿中關(guān)村論壇評(píng)分后彈出提示效果的方法,實(shí)例分析了javascript彈出特效的css與提示框的具體實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-02-02
  • js與css的阻塞問(wèn)題詳析

    js與css的阻塞問(wèn)題詳析

    JS具有阻塞特性,當(dāng)瀏覽器在執(zhí)行js代碼時(shí),不能同時(shí)做其它事情,下面這篇文章主要給大家介紹了關(guān)于js與css阻塞問(wèn)題的相關(guān)資料,需要的朋友可以參考下
    2021-07-07
  • JS報(bào)錯(cuò)Uncaught?TypeError:?XXX?is?not?a?function的解決方法

    JS報(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
  • JS繪制微信小程序畫(huà)布時(shí)鐘

    JS繪制微信小程序畫(huà)布時(shí)鐘

    微信小程序官方組件也提供了畫(huà)布功能,下面分享一下如何創(chuàng)建微信小程序畫(huà)布時(shí)鐘
    2016-12-12
  • 如何使用js獲取擴(kuò)展名詳解

    如何使用js獲取擴(kuò)展名詳解

    給你一個(gè)文件名,你能獲得它的擴(kuò)展名嗎?這篇文章主要給大家介紹了關(guān)于如何使用js獲取擴(kuò)展名的相關(guān)資料,文中介紹了幾種實(shí)現(xiàn)的方法,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2022-02-02
  • javascript arguments使用示例

    javascript arguments使用示例

    這篇文章主要通過(guò)一個(gè)實(shí)例,簡(jiǎn)單介紹了javascript arguments使用方法,小伙伴們參考下。
    2014-12-12

最新評(píng)論