javascript实现获取json数据分页功能

最新推荐文章于 2022-10-28 18:43:27 发布
VIP文章 最新推荐文章于 2022-10-28 18:43:27 发布
阅读量7.7k 收藏 6
点赞数
分类专栏： javascript实例 前端杂文 demo 文章标签： 分页 javascript json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xpf_show/article/details/38542505
版权 
<!DOCTYPE html>
<html>
<head>
<meta 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:\/\/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":"htt
最低0.47元/天 解锁文章
壹间show
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
javascript读取Json数据分页显示
03-15
支持键盘和滚轮翻页的javascript读取Json数据分页显示
javascript读取json数组生成滚动分页
11-03
javascript读取json数组生成滚动分页 javascript读取json数组生成滚动分页 javascript读取json数组生成滚动分页
通过jsonp获取json数据实现AJAX跨域请求
10-20
JSON 可通过 JavaScript 进行解析，JSON 数据可使用 AJAX 进行传输，这篇文章主要介绍了通过jsonp获取json数据（实现AJAX跨域请求），有兴趣的可以了解一下。
基于Jquery+Ajax+Json实现分页显示附效果图
10-25
后台action产生json数据，js获取json数据分页显示，详细的示例代码如下，需要的朋友可以学习下
jquery+json实现的搜索加分页效果
10-29
Javascript,json 实现的js 脚本搜索,加分页,附源码
Js读取json数据实现滚动分页实例
05-01
内容索引:脚本资源,Ajax/JavaScript,分页,滚动分页,Json　　Js读取json数据进行分页的一个实例，可能与其它的JS分页不太一样，本分页是采用滚动鼠标中轮的方式分页，也就是当显示的内容不完整时，滚动中轮就可以改变页码编号，自动进行数据分页，研究Json的朋友，参考一下本程序是个不错的选择。
使用js来实现分页功能
CQXXTXX的博客
10-24 3448
使用js实现分页功能
实现json的分页功能
fxc6666的博客
10-28 2108
// json分页 function pagination(page,number,Json_data){//获取分页数据 page为页number为要获取的数量 Json_data为数据总数 let counts=Json_data.length//获取数据总数 let start=(page-1)*number//获取开始值 let end=(page)*number//获取结束值、 let data=[] if(start>counts){//如果开始值大于总值就会返回空数组 retur
分页显示 html js处理,js 拉取所有数据，前端进行分页处理
weixin_33628926的博客
06-19 357
拉取所有数据，前端进行分页处理序号123456789上一页/下一页第页跳转function pageNum() {page = new Page(1,'table','temp1-container');//参数含义：每页显示条数；table的id;tbody的id}var tem1=document.getElementById("temp1").innerHTML;//表格数据function...
纯js分页(ajax获取数据)
10-14
此工具的目的是实现网页数据分页显示完全脱离服务器，单纯使用js实现，现在功能还比较简单，只能单纯显示数据，有其他需求可以联系探讨。 工具例子使用ajax获取列表数据，当然其他形式也行，最后应该把数据转换成json格式的字符串，详见例子。
ajax获取json数据使用jquery分页插件显示
06-22
插件下载地址 http://www.jq22.com/jquery-plugins分页-2-jq 下载的插件用自带的数据是可以的，但是采用ajax获取的json数据的时候会报错，所以我对插件进行了修改，成功实现。这个例子希望大家看懂自己来该，照抄不了。
javascript实现json页面分页实例代码
01-19
下午有个朋友问json 数据怎么分页 就捣鼓了一个东东出来 下面直接代码： 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...
js分页json数据
chijizhun7209的博客
12-20 412
var page=0;//页码 var num=10;//每页展示数据 var len=data.length;//总行数 var currentPage = page;//当前页数 var startRow = (currentPage - 1) * num+1;//开始显示的行 1 v...
js 使用JSON实现分页
qq_25285531的博客
04-20 261
使用JSON实现分页可直接用 Fenye.html <!DOCTYPE html> <html> <head> <title>JSON分页</title> </head> <body> <script type="text/javascript"> function getPageList...
通过JS实现数据分页
qq_45038782的博客
06-07 3087
通过JS实现数据分页 原理 加载数据； 构造简单页面； 通过JS动态操作数据及界面，实现数据分页。 代码实现 html 1.引用外部js文件 <meta charset="UTF-8"> <title>数据分页</title> <!--注意调用顺序--> <script src="js/Data.js" type="text/javasc...
基于JSON实现数据列表翻页显示
中国风的专栏
08-23 3846
本文要介绍的是一种采用纯前台方案，可以实现数据列表显示过程的翻页功能，其特点是以JSON, jQuery和Trimpath来实现前台数据的列表显示与翻页控制，整个过程中不依赖后台。
json一次取所有数据，然后在前后进行分页显示
w375179337的专栏
01-27 1201
  var mJson = null;  var pageIndex = 1;//当前页号  var pageCount = 0;//总页号  var pageSize  = 20;//每页显示数    //查询后返回值处理  function update_page(result) {    mJson = result;   var mSumRec   = mJson.length;    p
前端简单实现分页功能，无后端静态官网，请求本地json列表
guochangheng的博客
06-16 415
最近在做公司静态官网，无后端支持，新闻列表使用本地json数据形式获取，以下是简单的分页功能实现，写的比较仓促，后续再优化。
json模拟数据实现分页效果
最新发布
05-26
首先，我们需要生成一个包含多条数据的 JSON 数据，例如： ```json { "data": [ {"id": 1, "name": "Alice", "age": 20}, {"id": 2, "name": "Bob", "age": 22}, {"id": 3, "name": "Charlie", "age": 25}, {"id": 4, "name": "David", "age": 30}, {"id": 5, "name": "Emily", "age": 28}, {"id": 6, "name": "Frank", "age": 35}, {"id": 7, "name": "Grace", "age": 18}, {"id": 8, "name": "Henry", "age": 27}, {"id": 9, "name": "Ivy", "age": 23}, {"id": 10, "name": "Jack", "age": 32}, {"id": 11, "name": "Kate", "age": 29}, {"id": 12, "name": "Leo", "age": 26}, {"id": 13, "name": "Maggie", "age": 21}, {"id": 14, "name": "Nancy", "age": 24}, {"id": 15, "name": "Oliver", "age": 33}, {"id": 16, "name": "Penny", "age": 31}, {"id": 17, "name": "Quinn", "age": 19}, {"id": 18, "name": "Ray", "age": 36}, {"id": 19, "name": "Sandy", "age": 37}, {"id": 20, "name": "Tom", "age": 34} ] } ``` 接着，我们可以使用 JavaScript 编写一个函数来实现分页效果： ```javascript function paginate(data, page, pageSize) { const start = (page - 1) * pageSize; const end = start + pageSize; const paginatedData = data.slice(start, end); return paginatedData; } ``` 其中，`data` 表示要分页的 JSON 数据，`page` 表示当前页数，`pageSize` 表示每页显示的数据量。函数会根据当前页数和每页显示的数据量来计算出应该显示哪些数据，并返回分页后的数据。 例如，我们可以使用以下代码来测试分页效果： ```javascript const jsonData = { "data": [ {"id": 1, "name": "Alice", "age": 20}, {"id": 2, "name": "Bob", "age": 22}, {"id": 3, "name": "Charlie", "age": 25}, {"id": 4, "name": "David", "age": 30}, {"id": 5, "name": "Emily", "age": 28}, {"id": 6, "name": "Frank", "age": 35}, {"id": 7, "name": "Grace", "age": 18}, {"id": 8, "name": "Henry", "age": 27}, {"id": 9, "name": "Ivy", "age": 23}, {"id": 10, "name": "Jack", "age": 32}, {"id": 11, "name": "Kate", "age": 29}, {"id": 12, "name": "Leo", "age": 26}, {"id": 13, "name": "Maggie", "age": 21}, {"id": 14, "name": "Nancy", "age": 24}, {"id": 15, "name": "Oliver", "age": 33}, {"id": 16, "name": "Penny", "age": 31}, {"id": 17, "name": "Quinn", "age": 19}, {"id": 18, "name": "Ray", "age": 36}, {"id": 19, "name": "Sandy", "age": 37}, {"id": 20, "name": "Tom", "age": 34} ] }; const page = 2; const pageSize = 5; const paginatedData = paginate(jsonData.data, page, pageSize); console.log(paginatedData); ``` 输出结果如下： ```javascript [ {"id": 6, "name": "Frank", "age": 35}, {"id": 7, "name": "Grace", "age": 18}, {"id": 8, "name": "Henry", "age": 27}, {"id": 9, "name": "Ivy", "age": 23}, {"id": 10, "name": "Jack", "age": 32} ] ``` 可以看出，函数成功将第二页的数据（ID 为 6 到 10 的数据）返回了出来。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值