我写这篇博文不是为了讲jqGrid怎么用,而是为了记录一种解决问题的方法,当然对很多大牛和前辈来说,这种方法可能是小菜一碟,但我相信对于很多像我一样的菜鸟,还是非常有用的。
前台页面从servlet获取JSON数据并显示时,若数据为多条记录的形式,jqGrid表格插件是一个很好的选择。
但我在使用jqGrid表格插件的时候却遇到了一些问题:永远显示第一页,无论我怎么点翻页都无济于事。难道是这个插件写的有问题?不可能,因为人家官网都有演示的demo,明明可以翻页的,总不可能人家自己用一套js,放在页面上供人下载的是另一套吧。应该是我的js写错,但又不知错在哪,于是我开始在大堆的js中寻找处理翻页的逻辑,希望能够从中搞懂它们翻页的原理,以找出我的错误出在哪。
正当我在如茫茫大海般的js代码中苦苦寻找时,一位前辈帮我看了下,然后让我在我写的servlet里加一句控制台输出的代码,然后回到前台页面点翻页,发现每点一次控制台输出一条,于是确定每次翻页都会发一条请求给servlet获取数据。到这就可以知道需要我在servlet里动态地获取当前需要显示的页,然后把该页的数据返回,可是问题又来了,我怎么知道前台发送的request中是用什么关键字来表示当前页码的呢?于是前辈用我的Chrome打开前台页面,打开开发人员工具,找到Network,点翻页,这时出现了一个文件,点开这个文件,点Headers,在第一行就看到了page=当前请求页的页码,还有一个rows=一页显示条数。万事俱备!
最后把正确的关键代码也贴一下吧。
int noOfRows=Integer.parseInt(request.getParameter("rows"));
int page=Integer.parseInt(request.getParameter("page"));
JSONObject jsonObj = new JSONObject();
jsonObj.put("page", page);
jsonObj.put("total", Math.ceil((double)al.size()/(double)noOfRows));
jsonObj.put("records", al.size());
JSONArray rows = new JSONArray();
for(int i=(page-1)*noOfRows;i<Math.min(al.size(),page*noOfRows);i++){
HashMap hm=(HashMap)al.get(i);
JSONObject cell = new JSONObject();
cell.put("type",hm.get("fileType").toString());
cell.put("fileName", hm.get("fileName").toString());
cell.put("taskId", hm.get("taskId").toString());
cell.put("thrCharCode", hm.get("thrCharCode").toString());
cell.put("time", hm.get("time").toString());
rows.add(cell);
}
jsonObj.put("rows", rows);
try {
response.getWriter().print(jsonObj);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}