easyUI中，前端Pagination，数据的收不到的问题，已解决

因为第一次做Client Side Pagination in DataGrid，碰到的问题挺多的，下面这段代码是从easyUI上复制下来的，最后结合到自己的代码中，漏洞百出。
easyUI的代码：

1. function getData(){
2. var rows=[];
3. for(var i=1; i<=800; i++){
4. var amount=Math.floor(Math.random()*1000);
5. var price=Math.floor(Math.random()*1000);
6. rows.push({
7. inv:'Inv No '+i,
8. date: $.fn.datebox.defaults.formatter(newDate()),
9. name:'Name '+i,
10. amount: amount,
11. price: price,
12. cost: amount*price,
13. note:'Note '+i
14. });
15. }
16. return rows;
17. }

我的代码：

1. function getData() {
2. var array = [];
3. $.ajax({
4. url : 'hello2.do',
5. type : 'post',
6. cache : false,
7. dataType : 'json',
8. success : function(r) {
9. console.info(r);
10. console.info(r.rows);
11. var row = r.rows;
12. for ( var i = 0; i < row.length; i++) {
13. array.push({
14. id : row[i].id,
15. username : row[i].username,
16. password : row[i].password,
17. stunum : row[i].stunum,
18. rolenames : row[i].rolenames,
19. score : row[i].score
20. });
21. }
22. datagridtable2.datagrid('loadData', array);
23. }
24. });
25. }

在这个getDate（）方法中我使用了异步去完成所有数据的获取，效仿easyUI的for循环，闹了个笑话，找了大半天的TypeError: row[i] is undefined错误，后来发现我的for循环写错了，for ( var i = 0; i <= row.length; i++) 此处多了一个“=”等号。。等号。。号。。。

还有，datagridtable2.datagrid('loadData', array)，我一开始也是接在 $('#dg').datagrid({loadFilter:pagerFilter})后面的，我们的数据是异步取的，我试过像easyUI这样跃过for循环去return，发现获取不到数据，越过Ajax你将return不出数据，后来把datagridtable2提出来，直接在Ajax中给绑了。

easyUI代码：

1. function pagerFilter(data){
2. if(typeof data.length=='number'&&typeof data.splice=='function'){// is array
3. data ={
4. total: data.length,
5. rows: data
6. }
7. }
8. var dg= $(this);
9. var opts= dg.datagrid('options');
10. var pager= dg.datagrid('getPager');
11. pager.pagination({
12. onSelectPage:function(pageNum, pageSize){
13. opts.pageNumber= pageNum;
14. opts.pageSize= pageSize;
15. pager.pagination('refresh',{
16. pageNumber:pageNum,
17. pageSize:pageSize
18. });
19. dg.datagrid('loadData',data);
20. }
21. });
22. if(!data.originalRows){
23. data.originalRows=(data.rows);
24. }
25. var start=(opts.pageNumber-1)*parseInt(opts.pageSize);
26. var end= start+ parseInt(opts.pageSize);
27. data.rows=(data.originalRows.slice(start, end));
28. return data;
29. }
31. $(function(){
32. $('#dg').datagrid({loadFilter:pagerFilter}).datagrid('loadData', getData());
33. });

因为上面的原因，一直在找，为什么我的functionpagerFilter(data)，

data是有数据，但是解析不出来，就是应为Ajax数据未正确传递。

我的代码（这块基本没改）：

1. function pagerFilter(data) {
2. /*var data = data1.rows;*/
3. console.info(data);
4. /*console.info(data.rows.length);*/
5. console.info(typeof data.length == 'number');
6. console.info(typeof data.splice == 'function');
7. if (typeof data.length == 'number' && typeof data.splice == 'function') { // is array
8. data = {
9. total : data.length,
10. rows : data
11. }
12. }
13. var dg = $(this);
14. var opts = dg.datagrid('options');
15. var pager = dg.datagrid('getPager');
16. pager.pagination({
17. onSelectPage : function(pageNum, pageSize) {
18. opts.pageNumber = pageNum;
19. opts.pageSize = pageSize;
20. pager.pagination('refresh', {
21. pageNumber : pageNum,
22. pageSize : pageSize
23. });
24. dg.datagrid('loadData', data);
25. }
26. });
27. if (!data.originalRows) {
28. data.originalRows = (data.rows);
29. }
30. var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
31. var end = start + parseInt(opts.pageSize);
32. console.info(start);
33. console.info(end);
34. console.info(data.originalRows.slice(start, end));
35. data.rows = (data.originalRows.slice(start, end));
36. return data;
37. }

这个是我的java代码，用的是springMVC框架

1. @RequestMapping("/hello2")
2. @ResponseBody
3. public String execute2(HttpServletResponse response,HttpServletRequest request){
4. System.out.println("2222222222222222");
5. //int rows = Integer.parseInt(request.getParameter("rows"));
6. //int page = Integer.parseInt(request.getParameter("page"));
7. //System.out.println(rows+"=====分页shujv===="+page);
8. Map<String,Object> map = new HashMap<String,Object>();
9. List<StudentVO>  stuVO= new ArrayList<StudentVO>();
10. System.out.println("进入hello的 List中");
11. List<Student> listS = studentDao.findAll();
12. //studentDao.findByPage();
13. stuVO= studentDao.findStuVOAll(listS);
14. System.out.println("打印stuList"+stuVO);
15. //int total = studentDao.findTotal();
16. //System.out.println(total+"==============total");
17. map.put("rows", stuVO);
18. //map.put("total", total);
19. JSONObject fromObject = JSONObject.fromObject(map);
20. return fromObject.toString();
21. }

这个是我响应的json数据：

{"rows":[{"id":1,"password":"123","rolenames":"员工,管理员,","score":90,"stunum":1001,"username":"张一"},{"id":2,"password":"123","rolenames":"管理员,","score":80,"stunum":1002,"username":"
张二"},{"id":3,"password":"123","rolenames":"员工,","score":80,"stunum":1003,"username":"
张三"},{"id":4,"password":"123","rolenames":"管理员,","score":80,"stunum":1004,"username":"
张四"},{"id":5,"password":"123","rolenames":"员工,","score":80,"stunum":1005,"username":"
张五"},{"id":6,"password":"123","rolenames":"管理员,","score":80,"stunum":1006,"username":"
张六"},{"id":7,"password":"123","rolenames":"员工,管理员,","score":80,"stunum":1007,"username":"
张七"}]}