因为第一次做Client Side Pagination in DataGrid,碰到的问题挺多的,下面这段代码是从easyUI上复制下来的,最后结合到自己的代码中,漏洞百出。
easyUI的代码:
- function getData(){
- var rows=[];
- for(var i=1; i<=800; i++){
- var amount=Math.floor(Math.random()*1000);
- var price=Math.floor(Math.random()*1000);
- rows.push({
- inv:'Inv No '+i,
- date: $.fn.datebox.defaults.formatter(newDate()),
- name:'Name '+i,
- amount: amount,
- price: price,
- cost: amount*price,
- note:'Note '+i
- });
- }
- return rows;
- }
-
我的代码:
- function getData() {
- var array = [];
- $.ajax({
- url : 'hello2.do',
- type : 'post',
- cache : false,
- dataType : 'json',
- success : function(r) {
- console.info(r);
- console.info(r.rows);
- var row = r.rows;
- for ( var i = 0; i < row.length; i++) {
- array.push({
- id : row[i].id,
- username : row[i].username,
- password : row[i].password,
- stunum : row[i].stunum,
- rolenames : row[i].rolenames,
- score : row[i].score
- });
- }
- datagridtable2.datagrid('loadData', array);
- }
- });
- }
在这个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代码:
- 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({
- 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;
- }
-
- $(function(){
- $('#dg').datagrid({loadFilter:pagerFilter}).datagrid('loadData', getData());
- });
- function getData() {
- var array = [];
- $.ajax({
- url : 'hello2.do',
- type : 'post',
- cache : false,
- dataType : 'json',
- success : function(r) {
- console.info(r);
- console.info(r.rows);
- var row = r.rows;
- for ( var i = 0; i < row.length; i++) {
- array.push({
- id : row[i].id,
- username : row[i].username,
- password : row[i].password,
- stunum : row[i].stunum,
- rolenames : row[i].rolenames,
- score : row[i].score
- });
- }
- datagridtable2.datagrid('loadData', array);
- }
- });
- }
在这个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中给绑了。
因为上面的原因,一直在找,为什么我的functionpagerFilter(data),
data是有数据,但是解析不出来,就是应为Ajax数据未正确传递。
我的代码(这块基本没改):- function pagerFilter(data) {
- /*var data = data1.rows;*/
- console.info(data);
- /*console.info(data.rows.length);*/
- console.info(typeof data.length == 'number');
- console.info(typeof data.splice == 'function');
- 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({
- 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);
- console.info(start);
- console.info(end);
- console.info(data.originalRows.slice(start, end));
- data.rows = (data.originalRows.slice(start, end));
- return data;
- }
这个是我的java代码,用的是springMVC框架
- @RequestMapping("/hello2")
- @ResponseBody
- public String execute2(HttpServletResponse response,HttpServletRequest request){
- System.out.println("2222222222222222");
- //int rows = Integer.parseInt(request.getParameter("rows"));
- //int page = Integer.parseInt(request.getParameter("page"));
- //System.out.println(rows+"=====分页shujv===="+page);
- Map<String,Object> map = new HashMap<String,Object>();
- List<StudentVO> stuVO= new ArrayList<StudentVO>();
- System.out.println("进入hello的 List中");
- List<Student> listS = studentDao.findAll();
- //studentDao.findByPage();
- stuVO= studentDao.findStuVOAll(listS);
- System.out.println("打印stuList"+stuVO);
- //int total = studentDao.findTotal();
- //System.out.println(total+"==============total");
- map.put("rows", stuVO);
- //map.put("total", total);
- JSONObject fromObject = JSONObject.fromObject(map);
- return fromObject.toString();
- }
这个是我响应的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":"
张七
"}]}