html获得json数据后，在html页面分页问题。

快跑蜗牛哥 2017-11-30 03:10:39
从json中获得数据后，在html页面分页，
请问每页显示9笔资料，
以下资料在html页面如何分页，可以直接套用分页插件吗？
有相关例子吗？
例如json中的资料如下。


{"total":115,"rows":[{"ID":"1","ORG_NAME":"测试","ADDRESS":"中国"},

                    {"ID":"2","ORG_NAME":"123","ADDRESS":"武汉"},

                    {"ID":"3","ORG_NAME":"345","ADDRESS":"南昌"},

                    {"ID":"4","ORG_NAME":"645","ADDRESS":"合肥"},

                    {"ID":"5","ORG_NAME":"ere","ADDRESS":"测试"},

                    {"ID":"6","ORG_NAME":"tyt","ADDRESS":"上海"},

                    {"ID":"7","ORG_NAME":"123tyt","ADDRESS":"广州"}]

                    {"ID":"9","ORG_NAME":"123tyt","ADDRESS":"深圳"}]

                    {"ID":"10","ORG_NAME":"123tyt","ADDRESS":"东莞"}]

                    {"ID":"11","ORG_NAME":"123tyt","ADDRESS":"北京"}]

}

以下是 读取 json的资料（样式设定了3笔一行）


<script type="text/javascript">

        <!--

			$.ajax({

    url: "http://192.168.2.12:8086/survey/page/json",

    type: "GET",

    dataType: "json",

    success: function (data) {

	var html = '';  

        divshow.append(data.total); 

        data.rows.forEach(function(v){

	html += '<div class="Div1">';   

		html += '<div class="Div1_1"> </div>'; 

        html += '<div class="Div1_2">显示ID：<strong>'+v.ID+'</strong></div>';   

        html += '<div class="Div1_1"> </div>'; 

        html += '<div class="Div1_3">显示ORG_NAME：'+v.ORG_NAME+'</div>'; 

		html += '<div class="Div1_1"> </div>';

        html += '<div class="Div1_3">显示ADDRESS：'+v.ADDRESS+'</div>';   

        html += '</div>';   

	    $('#xx').html(html); 

        }

		);

    }

});

        

        //-->

        </script>

html显示资料。


<dl class="test_001">

                   <ul style="height:600px;">

				      <div class="Div0"  id="xx">

				      </div>

                  </ul>

		 <p style="float:right;">每页9条记录  总共10条记录   首页   上一页   下一页   尾页 <p>

  </dl>
...全文
863 8 打赏 收藏 转发到动态 举报
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
快跑蜗牛哥 2017-11-30
  • 打赏
  • 举报
 回复 1
引用 7 楼 jslang 的回复:

<script type="text/javascript">
var dataRows = [];
var pageIndex = 0;
var pageNum = 9;//每页 显示9笔资料。
function page(p) {
	pageIndex = Math.max(0,Math.min(p,Math.ceil(dataRows.length/pageNum)-1));
	var html = '';
	for (var i = pageIndex*pageNum; i < Math.min(pageIndex*pageNum+pageNum,dataRows.length); i++) {
		var v = dataRows[i];
		html += '<div class="Div1">';
		html += '<div class="Div1_1"> </div>';
	    html += '<div class="Div1_2">显示ID：<strong>'+v.ID+'</strong></div>';
	    html += '<div class="Div1_1"> </div>';
	    html += '<div class="Div1_3">显示ORG_NAME：'+v.ORG_NAME+'</div>';
		html += '<div class="Div1_1"> </div>';
	    html += '<div class="Div1_3">显示ADDRESS：'+v.ADDRESS+'</div>';
	    html += '</div>';
	}
	$('#xx').html(html);
}

$(function(){

	$.ajax({
	    url: "http://192.168.2.12:8086/survey/page/json",
	    type: "GET",
	    dataType: "json",
	    success: function (data) {
	        divshow.append(data.total);
		    dataRows = data.rows;
			$("#mlen").text(dataRows.length);
		    page(0);
	    }
	});
});
        </script>




<dl class="test_001">
                   <ul style="height:600px;">
				      <div class="Div0"  id="xx">
				      </div>
                  </ul>
		 <p style="float:right;">每页9条记录  总共<span id="mlen"></span>条记录
		 <a href="javascript:page(0)">首页</a>
		 <a href="javascript:page(pageIndex-1)">上一页</a>
		 <a href="javascript:page(pageIndex+1)">下一页</a>
		 <a href="javascript:page(999999)">尾页</a>
         </p>
  </dl>
多谢，可以满足要求。
天际的海浪 2017-11-30
  • 打赏
  • 举报
 回复 

<script type="text/javascript">
var dataRows = [];
var pageIndex = 0;
var pageNum = 9;//每页 显示9笔资料。
function page(p) {
	pageIndex = Math.max(0,Math.min(p,Math.ceil(dataRows.length/pageNum)-1));
	var html = '';
	for (var i = pageIndex*pageNum; i < Math.min(pageIndex*pageNum+pageNum,dataRows.length); i++) {
		var v = dataRows[i];
		html += '<div class="Div1">';
		html += '<div class="Div1_1"> </div>';
	    html += '<div class="Div1_2">显示ID：<strong>'+v.ID+'</strong></div>';
	    html += '<div class="Div1_1"> </div>';
	    html += '<div class="Div1_3">显示ORG_NAME：'+v.ORG_NAME+'</div>';
		html += '<div class="Div1_1"> </div>';
	    html += '<div class="Div1_3">显示ADDRESS：'+v.ADDRESS+'</div>';
	    html += '</div>';
	}
	$('#xx').html(html);
}

$(function(){

	$.ajax({
	    url: "http://192.168.2.12:8086/survey/page/json",
	    type: "GET",
	    dataType: "json",
	    success: function (data) {
	        divshow.append(data.total);
		    dataRows = data.rows;
			$("#mlen").text(dataRows.length);
		    page(0);
	    }
	});
});
        </script>


<dl class="test_001">
                   <ul style="height:600px;">
				      <div class="Div0"  id="xx">
				      </div>
                  </ul>
		 <p style="float:right;">每页9条记录  总共<span id="mlen"></span>条记录
		 <a href="javascript:page(0)">首页</a>
		 <a href="javascript:page(pageIndex-1)">上一页</a>
		 <a href="javascript:page(pageIndex+1)">下一页</a>
		 <a href="javascript:page(999999)">尾页</a>
         </p>
  </dl>
快跑蜗牛哥 2017-11-30
  • 打赏
  • 举报
 回复
引用 5 楼 xiao_lone 的回复:
要是你有第三方分页插件那就比较方便，按照它的数据加载方式给它想要的数据就可以了，事件和页面展示一定都帮你弄好了。如果没有你自己可以设计好页面展示的布局，给分页按钮绑定事件，你的json数据后面有点问题，广州、深圳、东莞后面的中括号多了]，可以用var mydata = 你的json数据，mydata.rows.slice(start,end)截取你要的数据。
资料是 我手动设置的一些测试资料， 应该是。 {"total":115,"rows":[{"ID":"1","ORG_NAME":"测试","ADDRESS":"中国"}, {"ID":"2","ORG_NAME":"123","ADDRESS":"武汉"}, {"ID":"3","ORG_NAME":"345","ADDRESS":"南昌"}, {"ID":"4","ORG_NAME":"645","ADDRESS":"合肥"}, {"ID":"5","ORG_NAME":"ere","ADDRESS":"测试"}, {"ID":"6","ORG_NAME":"tyt","ADDRESS":"上海"}, {"ID":"7","ORG_NAME":"123tyt","ADDRESS":"广州"}, {"ID":"9","ORG_NAME":"123tyt","ADDRESS":"深圳"}, {"ID":"10","ORG_NAME":"123tyt","ADDRESS":"东莞"}, {"ID":"11","ORG_NAME":"123tyt","ADDRESS":"北京"}] }
xiao_lone 2017-11-30
  • 打赏
  • 举报
 回复
要是你有第三方分页插件那就比较方便，按照它的数据加载方式给它想要的数据就可以了，事件和页面展示一定都帮你弄好了。如果没有你自己可以设计好页面展示的布局，给分页按钮绑定事件，你的json数据后面有点问题，广州、深圳、东莞后面的中括号多了]，可以用var mydata = 你的json数据，mydata.rows.slice(start,end)截取你要的数据。
快跑蜗牛哥 2017-11-30
  • 打赏
  • 举报
 回复
引用 1 楼 jslang 的回复:
你是页面初始时用ajax一次性获取全部数据，还是每次翻页都获取这一页的数据？
一次性读取。数据量不是很多，最多的数据不超过50笔。 每页 显示9笔资料。
快跑蜗牛哥 2017-11-30
  • 打赏
  • 举报
 回复
引用 2 楼 xiao_lone 的回复:
前台分页还是后台分页呀，后台分页就是抓取数据要筛选一下，页面上基本上就是显示和翻页的问题；如果前台分页，你需要把数据在前台进行筛选处理，看你怎么操作了
前台分页，全部在html页面实现。
xiao_lone 2017-11-30
  • 打赏
  • 举报
 回复
前台分页还是后台分页呀，后台分页就是抓取数据要筛选一下，页面上基本上就是显示和翻页的问题；如果前台分页，你需要把数据在前台进行筛选处理，看你怎么操作了
天际的海浪 2017-11-30
  • 打赏
  • 举报
 回复
你是页面初始时用ajax一次性获取全部数据，还是每次翻页都获取这一页的数据？
javascript实现json页面分页实例代码
下午有个朋友问json 数据怎么分页 就捣鼓了一个东东出来 下面直接代码： 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...
HTML print打印(分页,统计,排版)
方案一(适用于动态页面)分层结构 方案二(适用于静态页面)... * StringtoJSON 将JSON的String字符,转换成JS对象数据 * getalign 字符切换 对应setAlign 方法 * SumTable 计算表的列("2,3,4") 对应层级TABLE **/
jQuery getJSON()+.ashx 实现分页(改进版)
参考了：//www.jb51.net/article/35110.htm改进的地方： 1、ashx返回json数据，减少传输数据量，html页面样式控制也比较灵活； 2、改写html页的jQuery代码； 3、把3个ashx文件简化为1个。 一、创建表的测试数据： ...
使用SpringBoot+MyBatis+MySQL，利用HTML和jQuery技术，实现单表增删改查、条件查询和分页、文件上传和下载功能
完成使用SpringBoot+Mybatis+MySQL，实现单表数据的增删改查、条件查询和分页、文件上传和下载功能。页面使用原生HTML，利用jQuery解析SpringBoot返回的json字符串。
ajax json实现分页,基于Json的Ajax无刷新分页效果实现（一）
如图，上部分是分页后取出来的数据。下部分是 分页器的实现(关于分页器的实现请参考 http://www.cnblogs.com/zhouzhaokun/archive/2011/08/24/2151558.html)我们先来实现页面的分页效果，1、新建一个 ajax 文件页面 ...
CSS

61,115

社区成员

60,730

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章