javascript实现json页面分页实例代码_javascript技巧
下午有个朋友问json 数据怎么分页 就捣鼓了一个东东出来
下面直接代码：
<!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>无标题文档</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:\/\/
{"category1_id":"2","category1_name":"\u7c73\u9762\u7cae\u6cb9","category1_intro":"\u5bb6\u5ead\u5fc5\u5907",
"category1_images":"http:\/\/
{"category1_id":"3","category1_name":"\u7f8e\u5bb9\u6d17\u62a4","category1_intro":"\u62a4\u80a4\u5fc5\u5907",
"category1_images":"http:\/\/
{"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:\/\/
"category1_name":"\u751f\u6d3b\u7528\u54c1","category1_intro":"\u5bb6\u5ead\u5fc5\u5907",
"category1_images":"http:\/\/
{"category1_id":"6","category1_name":"\u4f11\u95f2\u98df\u54c1","category1_intro":"\u597d\u5403\u7f8e\u5473",
"category1_images":"http:\/\/
]};
var y=1;//表示页数
var t=2;//表示每页现实几条数据
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('已经是第一页了');
f=0;
}
if(y==zy && f==1)
{
alert('已经是最后一页了');
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;//页数-1 乘以每页现实多少条 结果为 本页从第几条开始
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实现json页面分页实例代码_javascript技巧的内容，更多相关内容请关注PHP中文网（www.php.cn）！
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1377
52
Apakah perbezaan antara MySQL5.7 dan MySQL8.0?
Feb 19, 2024 am 11:21 AM
MySQL5.7 dan MySQL8.0 ialah dua versi pangkalan data MySQL yang berbeza Terdapat beberapa perbezaan utama antara mereka: Peningkatan prestasi: MySQL8.0 mempunyai beberapa peningkatan prestasi berbanding MySQL5.7. Ini termasuk pengoptimum pertanyaan yang lebih baik, penjanaan pelan pelaksanaan pertanyaan yang lebih cekap, algoritma pengindeksan yang lebih baik dan pertanyaan selari, dsb. Penambahbaikan ini boleh meningkatkan prestasi pertanyaan dan prestasi keseluruhan sistem. Sokongan JSON: MySQL 8.0 memperkenalkan sokongan asli untuk jenis data JSON, termasuk penyimpanan, pertanyaan dan pengindeksan data JSON. Ini menjadikan pemprosesan dan memanipulasi data JSON dalam MySQL lebih mudah dan cekap. Ciri transaksi: MySQL8.0 memperkenalkan beberapa ciri transaksi baharu, seperti atomic
Petua pengoptimuman prestasi untuk menukar tatasusunan PHP kepada JSON
May 04, 2024 pm 06:15 PM
Kaedah pengoptimuman prestasi untuk menukar tatasusunan PHP kepada JSON termasuk: menggunakan sambungan JSON dan fungsi json_encode() menambah pilihan JSON_UNESCAPED_UNICODE untuk mengelakkan aksara melarikan diri menggunakan penimbal untuk meningkatkan prestasi pengekodan JSON; Pustaka pengekodan JSON.
Tutorial penggunaan Panda: Permulaan pantas untuk membaca fail JSON
Jan 13, 2024 am 10:15 AM
Permulaan Pantas: Kaedah Pandas membaca fail JSON, contoh kod khusus diperlukan Pengenalan: Dalam bidang analisis data dan sains data, Pandas ialah salah satu perpustakaan Python yang penting. Ia menyediakan fungsi yang kaya dan struktur data yang fleksibel, serta boleh memproses dan menganalisis pelbagai data dengan mudah. Dalam aplikasi praktikal, kita sering menghadapi situasi di mana kita perlu membaca fail JSON. Artikel ini akan memperkenalkan cara menggunakan Panda untuk membaca fail JSON dan melampirkan contoh kod tertentu. 1. Pemasangan Panda
Bagaimanakah anotasi dalam perpustakaan Jackson mengawal pensirilan dan penyahsirilan JSON?
May 06, 2024 pm 10:09 PM
Anotasi dalam perpustakaan Jackson mengawal pensirilan dan penyahserilangan JSON: Pensirilan: @JsonIgnore: Abaikan harta @JsonProperty: Tentukan nama @JsonGetter: Gunakan kaedah get @JsonSetter: Gunakan kaedah yang ditetapkan Deserialization: @JsonIgnoreProperties: Abaikan harta @ JsonProperty: Nyatakan nama @JsonCreator: Gunakan pembina @JsonDeserialize: Logik tersuai
Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP
Jan 05, 2024 pm 06:08 PM
Tutorial JavaScript: Bagaimana untuk mendapatkan kod status HTTP, contoh kod khusus diperlukan: Dalam pembangunan web, interaksi data dengan pelayan sering terlibat. Apabila berkomunikasi dengan pelayan, kami selalunya perlu mendapatkan kod status HTTP yang dikembalikan untuk menentukan sama ada operasi itu berjaya dan melaksanakan pemprosesan yang sepadan berdasarkan kod status yang berbeza. Artikel ini akan mengajar anda cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan menyediakan beberapa contoh kod praktikal. Menggunakan XMLHttpRequest
Pemahaman mendalam tentang PHP: Kaedah pelaksanaan menukar Unicode JSON kepada bahasa Cina
Mar 05, 2024 pm 02:48 PM
Pemahaman mendalam tentang PHP: Kaedah pelaksanaan menukar JSONUnicode kepada Bahasa Cina Semasa pembangunan, kami sering menghadapi situasi di mana kami perlu memproses data JSON dan pengekodan Unicode dalam JSON akan menyebabkan kami beberapa masalah dalam beberapa senario, terutamanya apabila kami perlu menukar Unicode Apabila pengekodan ditukar kepada aksara Cina. Dalam PHP, terdapat beberapa kaedah yang boleh membantu kami mencapai proses penukaran ini Kaedah biasa akan diperkenalkan di bawah dan contoh kod khusus akan disediakan. Mula-mula, mari kita fahami dulu Un dalam JSON
Bagaimana untuk mendapatkan kod status HTTP dalam JavaScript dengan cara yang mudah
Jan 05, 2024 pm 01:37 PM
Pengenalan kepada kaedah mendapatkan kod status HTTP dalam JavaScript: Dalam pembangunan bahagian hadapan, kita selalunya perlu berurusan dengan interaksi dengan antara muka bahagian belakang, dan kod status HTTP adalah bahagian yang sangat penting daripadanya. Memahami dan mendapatkan kod status HTTP membantu kami mengendalikan data yang dikembalikan oleh antara muka dengan lebih baik. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan memberikan contoh kod khusus. 1. Apakah kod status HTTP bermakna kod status HTTP apabila penyemak imbas memulakan permintaan kepada pelayan, perkhidmatan tersebut
Petua pantas untuk menukar tatasusunan PHP kepada JSON
May 03, 2024 pm 06:33 PM
Tatasusunan PHP boleh ditukar kepada rentetan JSON melalui fungsi json_encode() (contohnya: $json=json_encode($array);), dan sebaliknya, fungsi json_decode() boleh digunakan untuk menukar daripada JSON kepada tatasusunan ($array= json_decode($json);) . Petua lain termasuk mengelakkan penukaran mendalam, menentukan pilihan tersuai dan menggunakan perpustakaan pihak ketiga.
