文档章节

datagrid分页

D
 DakeZhang
发布于 2017/09/06 17:33
字数 11
阅读 99
收藏 0

钉钉、微博极速扩容黑科技,点击观看阿里云弹性计算年度发布会!>>>

后台分页: `<script type="text/javascript">

var page=1;
var rows=20;
$(function(){
	var dg = $('#id');
	var opts = dg.datagrid('options');
	var pager = dg.datagrid('getPager');
	pager.pagination({
		pageList : [ 20, 30, 50 ],//这里是每页显示的条数
		onSelectPage : function(pageNum, pageSize) {
			page = pageNum;
			rows = pageSize;
			getprodata(page,rows);
		}//这里获取底部分页栏的当前页和每页显示的条数
	}); 
	getprodata(page,rows);	
	
function getprodata(page,rows){
	$.ajax({
		type:"post",
		url:"",//对应的路径
		dataType:"json",
		data:{"page":page,"rows":rows},
		async:false,
		cache:false,
		success:function(msg){
			var bdzdata=eval(msg).rows;
			var total=eval(msg).total;
			dataOption = {
					total : total,
					rows : bdzdata
				}//后台将数据拼成total,和rows的jeson格式
			$("#tablebdz").datagrid("loadData",dataOption);
			
		}
		
	});
	
}

</script>`

前台分页:```

<script type="text/javascript"> $.ajax({ type:"post", url:" ",//对应的url dataType:"json", data:{ },//传的参数 async:false, cache:false, success:function(msg){ var bdzdata=eval(msg).gj; $('#tablebdz').datagrid({ loadFilter : pagerFilter }).datagrid('loadData', bdzdata); } function pagerFilter(data) { if (typeof data.length == 'number' && typeof data.splice == 'function') { // is array data = { total : data.length, rows : data } } var dg = $(this); var opts = dg.datagrid('options'); var pager = dg.datagrid('getPager'); pager.pagination({ pageList : [ 10, 15, 20 ], onSelectPage : function(pageNum, pageSize) { opts.pageNumber = pageNum; opts.pageSize = pageSize; pager.pagination('refresh', { pageNumber : pageNum, pageSize : pageSize }); dg.datagrid('loadData', data); } }); if (!data.originalRows) { data.originalRows = (data.rows); } var start = (opts.pageNumber - 1) * parseInt(opts.pageSize); var end = start + parseInt(opts.pageSize); data.rows = (data.originalRows.slice(start, end)); return data; } </script>

D
粉丝 0
博文 10
码字总数 1426
作品 0
合肥
私信 提问
加载中
请先登录后再评论。
JAVAEE——BOS物流项目04:学习计划、datagrid、分页查询、批量删除、修改功能

1 学习计划 1、datagrid使用方法(重要) n 将静态HTML渲染为datagrid样式 n 发送ajax请求获取json数据创建datagrid n 使用easyUI提供的API创建datagrid(掌握) 2、实现取派员分页查询 n 调...

osc_k0ot8pgk
2018/02/19
2
0
ASP.NET中利用DataGrid的自定义分页功能和存储过程结合实现高效分页

关键字:DataGrid、存储过程、分页 出自: http://blog.csdn.net/yzx110/archive/2004/08/18/78525.aspx 摘要:在最进的一个项目中因为一个管理页面要管理的数据量非常大,所以必须分页显示,...

晨曦之光
2012/03/09
99
0
EasyUI中datagrid控件的使用总结

概述 上一篇文章EasyUI的使用总结主要介绍了首次使用EasyUI 如何操作,介绍了EasyUI控件的整体结构以及实践中的一些注意事项。 这篇文章主要介绍一些EasyUI中datagrid控件实际使用过程中的一...

科比可比克
2016/11/08
141
0
Datalist控件,Repeater控件如何分页?

Asp.net提供了三个功能强大的列表控件:DataGrid、DataList和Repeater控件,但其中只有DataGrid控件提供分页功能。相对DataGrid,DataList和Repeater控件具有更高的样式自定义性,所以很多时...

晨曦之光
2012/03/09
274
0
easyui datagrid分页方法区别

1.通过pager对象进行分页设置 网上百度datagrid分页,看到大部门都是通过如下脚本所示的进行设置: $(function(){ var p = $('#hdr').datagrid('getPager'); $(p).pagination({ pageSize: 20......

三流小角色
2015/10/19
128
0

没有更多内容

加载失败,请刷新页面

加载更多

SpringCloud 应用在 Kubernetes 上的最佳实践 — 开发篇

作者 | 孤弋 阿里云高级技术专家,负责 EDAS 的开发和用户体验优化工作。 前言 近年来,云原生、Kubernetes、微服务、SpringCloud 这些名词在技术圈内不绝于耳,数据显示,使用 SpringCloud ...

阿里云技术博客
11分钟前
0
0
如何能够高效率学习Web前端技术

  Web前端开发作为前端技术的重要组成,一直占据着重要的地位,整个IT行业内有大量的前端开发从业者,随着移动互联网、大数据和人工智能的发展,目前前端的知识体系也在逐渐丰富。   要想...

SXXpenguin
11分钟前
0
0
Spring Boot 2.3.0正式发布:优雅停机、配置文件位置通配符新特性一览

当大潮退去,才知道谁在裸泳。。关注公众号【BAT的乌托邦】开启专栏式学习,拒绝浅尝辄止。本文 https://www.yourbatman.cn 已收录,里面一并有Spring技术栈、MyBatis、中间件等小而美的专栏...

osc_odp8kgup
11分钟前
0
0
HttpMessageConverter是这样转换数据的

Java Web 人员经常要设计 RESTful API(如何设计好的RESTful API),通过 json 数据进行交互。那么前端传入的 json 数据如何被解析成 Java 对象作为 API入参,API 返回结果又如何将 Java 对象...

tan日拱一兵
2019/05/27
0
0
angular浏览器兼容性问题解决方案

问题:edge浏览器下,固定列的边框消失 原因:ng-zorro-antd表格组件使用nzLeft和nzRight指令固定的表格列,这两个指令的实现css3中的标签: position: -webkit-sticky !important;positio...

osc_elbmybcg
13分钟前
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部