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>
...全文
662 8 打赏 收藏 举报
写回复
8 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
快跑蜗牛哥 2017-11-30
引用 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一次性获取全部数据,还是每次翻页都获取这一页的数据?
  • 打赏
  • 举报
回复
相关推荐
发帖
CSS
加入

6.0w+

社区成员

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
申请成为版主
帖子事件
创建了帖子
2017-11-30 03:10
社区公告
暂无公告