EasyUI DataGrid 分页示例

1、引入样式和JS

<link rel="stylesheet" type="text/css" href="/spdbweblte/js/jquery-easyui-1.5.2/themes/gray/easyui.css">

<link rel="stylesheet" type="text/css" href="/spdbweblte/js/jquery-easyui-1.5.2/themes/icon.css">

<link rel="stylesheet" type="text/css" href="/spdbweblte/js/jquery-easyui-1.5.2/demo/demo.css">

<script type="text/javascript" src="/spdbweblte/js/jquery-3.1.1.js"></script>

<script type="text/javascript" src="/spdbweblte/js/jquery-easyui-1.5.2/jquery.easyui.min.js"></script>

 

2、WEB使用EasyUI DataGrid分页

<table id="dgRedundWeakRatTA" title="重叠覆盖度+弱覆盖系数+TA"></table>

$(function() {

var dg = $('#dgRedundWeakRatTA').datagrid({

url : '/spdbweblte/PRstStruMroredund/getList',

iconCls : 'icon-more',

//title:'功能菜单 ',

width : 'auto',

height : 'auto',

pagination : true,

remoteFilter : true,

rownumbers : true,

method : 'get',

singleSelect : true,

collapsible : true,

fit : true,

fitColumns : true,

onLoadSuccess:function(data){//无法找到列名，可以先打印出来

if(data.total==0){

var dc = $(this).data('datagrid').dc;

var header2Row = dc.header2.find('tr.datagrid-header-row');

dc.body2.find('table').append(header2Row.clone().css({"visibility":"hidden"}));

}

for(var i=0;i<data.rows.length;i++){

var columns ;

for (var sProp in data.rows[i]) {

columns= columns+"="+sProp+"："+data.rows[i][sProp]+"|";

}

alert(columns);

}

//alert(data.total+'|'+eval(data.rows));

},

columns : [ [ {field : 'sectorid',title : '小区名',width : 100},

{field : 'allsamples',title : '采样点',width : 100},

{field : 'redundcount',title : '重叠覆盖采样点',width : 100,align : 'right'},

{field : 'redundratio', title : '重叠覆盖',width : 100},

{field : 'ssamples110u',title : 'RSRP110采样点',width : 100},

{field : 's110uratio',title : '覆盖率',width : 100,align : 'right'} ,

{field : 'avgltesctadv',title : '平均TA', width : 100,align : 'right'}] ]});

 

var p = $('#dgRedundWeakRatTA').datagrid('getPager');

$(p).pagination({

pageSize : 10,//每页显示的记录条数，默认为10

pageList : [ 10, 20, 50, 100 ],//可以设置每页记录条数的列表

beforePageText : '第',//页数文本框前显示的汉字

afterPageText : '页 共 {pages} 页',

displayMsg : '当前显示 {from} - {to} 条记录 共 {total} 条记录'

});

$('.panel-tool').html( '<a href="javascript:;" class="panel-tool-download" alt="下载报表"></a>');

});

 

3、Java后台提供数据

/** MRO结构分析查询分页语句(参数form),根据条件查询出每页的数据集 */

@RequestMapping("/getList")

@ResponseBody

public Map<String, Object> getList(HttpServletRequest request) {

try {

PRstStruMroScNRelPojo pojo = new PRstStruMroScNRelPojo();

Integer pageRows = 10;

Integer page = 1;

String order = null;

if (null != request.getParameter("rows")) {

pageRows = Integer.parseInt(request.getParameter("rows")

.toString());

}

if (null != request.getParameter("page")) {

page = Integer

.parseInt(request.getParameter("page").toString());

}

if (null != request.getParameter("order")) {

order = request.getParameter("order").toString();

}

if (null != request.getParameter("sort")) {

order = request.getParameter("sort").toString();

}

 

PageInfo<PRstStruMroScNRelPojo> list = service.queryforpage(pojo,page, pageRows);

Map<String, Object> tablePageParameter = new HashMap<String, Object>();

tablePageParameter.put("total", list.getTotal());

tablePageParameter.put("rows", list.getList());

List<PRstStruMroScNRelPojo> list1 = list.getList();

for (PRstStruMroScNRelPojo p : list1) {

System.out.println(p);

}

return tablePageParameter;

} catch (Exception e) {

return null;

}

}