关于Jquery easyUI datagrid 分页的问题
Dao的代码
//获取所有的部门信息
public CutPageBean getAllDeptTable(int pageNo,int pageSize){
this.getConnection();
StringBuffer sb = new StringBuffer();
CutPageBean cut = new CutPageBean();
List list = cut.getList();
sb.append("select top ");
sb.append(pageSize);
sb.append(" * from t_dept where id not in(select top ");
sb.append(pageSize*(pageNo-1));
sb.append(" id from t_dept order by id) order by id");
try {
ps = this.con.prepareStatement(sb.toString());
this.rs = this.ps.executeQuery();
while(rs.next()){
DeptBean dept = new DeptBean();
dept.setId(rs.getInt("id"));
dept.setDept_Code(rs.getString("Dept_Code"));
dept.setDept_Name(rs.getString("Dept_Name"));
dept.setMgr_Code(rs.getString("Mgr_Code"));
list.add(dept);
}
ps = this.con.prepareStatement("select count(*) number from t_dept");
rs = ps.executeQuery();
rs.next();
int number = rs.getInt("number");
cut.setTotalPage(number);
} catch (Exception e) {
e.printStackTrace();
}finally{
this.close(rs, ps, con);
}
return cut;
}
----------------------------
CutPageBean代码
public class CutPageBean {
private int totalPage;
private List list = new ArrayList();
public List getList() {
return list;
}
public void setList(List list) {
this.list = list;
}
public int getTotalPage() {
return totalPage;
}
public void setTotalPage(int totalPage) {
this.totalPage = totalPage;
}
}
-----------------------------
Action的代码
---------------------------------------------------
public class DeptAction extends ActionSupport{
//每页显示的记录数
private String rows;
//当前第几页
private String page;
//此处定义为JSONObject是因为datagrid默认接收的为json对象而不是json字符串，
//如果定义为string类型的页面读取数据时会报错，我之前报错为rows is not defined
private JSONArray resultObj;
DeptDao d = new DeptDao();
public String getAllDeptTable(){
System.out.println("pageNo:"+page+" pageSize:"+rows);
StringBuffer sb = new StringBuffer();
CutPageBean cut = d.getAllDeptTable(Integer.parseInt(page),Integer.parseInt(rows));
resultObj=JSONArray.fromObject(cut.getList()); //将list对象转换成为json对象
sb.append("{"total":"+cut.getTotalPage()+",");
sb.append(""rows":");
String str = resultObj.toString();
str = sb.toString()+resultObj+"}";
System.out.println(str);
return SUCCESS;
}
public JSONArray getResultObj() {
return resultObj;
}
public void setResultObj(JSONArray resultObj) {
this.resultObj = resultObj;
}
public static void main(String[] args) {
DeptAction de = new DeptAction();
de.setPage("2");
de.setRows("20");
}
public String getRows() {
return rows;
}
public void setRows(String rows) {
this.rows = rows;
}
public String getPage() {
return page;
}
public void setPage(String page) {
this.page = page;
}
-------------------------
JSP代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Complex DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../css/easyui.css">
<link rel="stylesheet" type="text/css" href="../css/icon.css">
<link rel="stylesheet" type="text/css" href="../css/demo.css">
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
<script>
$(function(){
$('#test').datagrid({
title:'部门信息',
iconCls:'icon-tip',
width:'auto',
height:'auto',
//pageList表格显示多少行数据
//pageList:[5,10,15,20],
//nowrap:当true时，显示数据在同一行上。默认true
nowrap: true,
autoRowHeight: false,
//striped:当true时，单元格显示条纹。默认false。
striped: true,
//collapsible:是否可折叠的
collapsible:true,
url:'json/getDept.action',
//url:'datagrid_data.json',
//sortName:定义哪列可以排序
sortName: 'code',
//sortOrder:定义列的排列顺序，只能是'asc'或'desc'。默认asc
sortOrder: 'desc',
remoteSort: false,
//idField:说明哪个字段是一个标识字段。
idField:'id',
//frozenColumns:跟Columns属性相同，但是这些列将会被固定在左边。
frozenColumns:[[
{field:'ck',checkbox:true},
{title:'id',field:'id',width:80,sortable:true,align:'center'}
]],
columns:[[
{title:'部门编号',field:'dept_Code',width:100,align:'center',rowspan:2},
{title:'部门名称',field:'dept_Name',width:80,align:'center'},
{title:'主管员工号',field:'mgr_Code',width:80,align:'center'}
]],
//pagination:当true时在DataGrid底部显示一个分页工具栏。默认false
pagination:true,
//rownumbers:当true时显示行号。默认false。
rownumbers:true,
toolbar:[{
id:'btnadd',
text:'Add',
iconCls:'icon-add',
handler:function(){
$('#btnsave').linkbutton('enable');
alert('add')
}
},{
id:'btncut',
text:'Cut',
iconCls:'icon-cut',
handler:function(){
$('#btnsave').linkbutton('enable');
alert('cut')
}
},'-',{
id:'btnsave',
text:'Save',
disabled:true,
iconCls:'icon-save',
handler:function(){
$('#btnsave').linkbutton('disable');
alert('save')
}
},'-',{
text:'delete',
iconCls:'icon-remove',
handler:function(){
var rows = $('#test').datagrid('getSelections');
var ids;
if (rows){
for(var i=0;i<rows.length;i++){
if(i==0){
ids = "ids="+rows[i].id;
}
else{
ids = ids+"&ids="+rows[i].id;
}
}
$.post("json/deleteDept.action",ids,function(success){
$('#test').datagrid("reload");
});
alert(ids);
}
}
}]
});
var p = $('#test').datagrid('getPager');
$(p).pagination({
/*pageSize: 10,//每页显示的记录条数，默认为10
pageList:[5,10,15],//可以设置每页记录条数的列表 */
beforePageText: '第',//页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录',
onBeforeRefresh:function(pageNumber,pageSize){
//$(this).pagination('loading');
alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);
//$(this).pagination('loaded');
}
});
function resize(){
$('#test').datagrid('resize', {
width:700,
height:400
});
}
function getSelected(){
var selected = $('#test').datagrid('getSelected');
if (selected){
alert(selected.id+":"+selected.dept_Code+":"+selected.dept_Name+":"+selected.mgr_Code);
}
}
function getSelections(){
var ids = [];
var rows = $('#test').datagrid('getSelections');
alert(rows.length);
for(var i=0;i<rows.length;i++){
ids.push(rows[i].dept_Name);
}
//alert(ids.join(':'));
alert(ids);
alert(p);
}
function clearSelections(){
$('#test').datagrid('clearSelections');
}
function selectRow(){
$('#test').datagrid('selectRow',2);
}
function selectRecord(){
$('#test').datagrid('selectRecord','002');
}
function unselectRow(){
$('#test').datagrid('unselectRow',2);
}
function mergeCells(){
$('#test').datagrid('mergeCells',{
index:2,
field:'addr',
rowspan:2,
colspan:2
});
}
});
</script>
</head>
<body>
<div style="margin:10px 0;">
<a href="#" onclick="getSelected()">GetSelected</a>
<a href="#" onclick="getSelections()">GetSelections</a>
<a href="#" onclick="selectRow()">SelectRow</a>
<a href="#" onclick="selectRecord()">SelectRecord</a>
<a href="#" onclick="unselectRow()">UnselectRow</a>
<a href="#" onclick="clearSelections()">ClearSelections</a>
<a href="#" onclick="resize()">Resize</a>
<a href="#" onclick="mergeCells()">MergeCells</a>
</div>
<table id="test"></table>
</body>
</html>
---------------------------------------
struts.xml 代码
<package name="getDept" extends="json-default" namespace="/jsp/json">
<global-results>
<result type="json">
<param name="root">resultObj</param>
</result>
</global-results>
<action name="getDept" class="action.DeptAction" method="getAllDeptTable">
<!-- struts配置文件：使用jsonplugin将属性转换成json对象，extends="json-default" result type要为json
root 是只返回该内容，resultObj与action的属性名字一样，即要返回给页面的值 -->
</action>
<action name="deleteDept" alt="关于Jquery easyUI datagrid 分页的有关问题" />
上面是图片 我数据库这个表里面总共有100条记录 为什么 只显示了10条 而且不能翻页？为什么只有一页
这是打印出来的json
[解决办法]
你返回的resultObj只是rows没有total，建议你定义成JSONArray存储rows数据
然后resultObj定义为JSONObject
JSONObject resultObj = new JSONObject();
resultObj.element("total", total);
resultObj.element("rows",rows);
