ligerui1.2.0实现数据库端分页功能

LigerUI的两种分页方式

LigerUI的分页方式有两种：local和server。

如果数据量不是很大，就直接采用local分页，一次性的把数据全部发送到前台来，之后LigerUI自身的grid会自动分页。说一下total，在后台传送jsonString时传送定义好的total（总条数），你可以定义多少都可以，但是到前台它会自动将总条数赋值给total，这是local下的方式。

而如果数据量很大，一次性加载直接不显示数据或反应很慢的，就需要用server分页了，当用server分页时，每次请求都会比local时多发送两个参数：page和pagesize，不需要自己去发送，只需要在后台获取就行，

int page=Integer.parseInt(request.getParameter("page"));

int pagesize=Integer.parseInt(request.getParameter("pagesize"));

int total;

这时你可以把page和pagesize写进你的sql语句：

sql=".........";

sql+=" limit "+(page*pagesize-pagesize)+","+pagesize;

这样查出的结果放入jsonString中，这里要注意total了，total需要自己定义，需要自己重新查一下结果的总条数后赋值给total传到页面，其他的LigerUI会帮你搞定！

 

以下为实现部分内容

============

1.js页面

userGrid = $("#userGrid").ligerGrid({
        method:'GET',
        height:580,
        width:'100%',
        usePager:true,
        columns: [
            { display:Resource.userName, name: "userName", align: 'left', width: 100, minWidth: 60 },
            { display:Resource.email, name: "email", align: 'left', width: 250, minWidth: 60 },
            { display:Resource.deparentment, name: "deparentment", align: 'left', width: 100, minWidth: 60 },
//            { display:Resource.password, name: "password", align: 'left', width: 100, minWidth: 60 },
            { display:Resource.userType, name: "privilege", align: 'left', width: 100, minWidth: 60,
                render: function (item) {
                    var privilege = item.privilege;
                    if (privilege == '1') {
                        return Resource.tempUser;
                    }else if (privilege == '2') {
                        return Resource.commonUser;
                    }else if (privilege == '4') {
                        return Resource.advancedUser;
                    }else if (privilege == '8') {
                        return Resource.knowledgeManager;
                    }else if (privilege == '16') {
                        return Resource.administrator;
                    }
                }
            },
            { display:Resource.accountState, name: "accountState", align: 'left', width: 100, minWidth: 60,
                render: function (item) {
                    var accountState = item.accountState;
                    if(accountState== '1'){
                        return Resource.normal;
                    }else if(accountState == '2'){
                        return Resource.unactive;
                    }else if(accountState == '4'){
                        return Resource.stopped;
                    }
                }
            },
            { display:Resource.accountExpireDate, name: "accountExpireDate", align: 'left', width: 100, minWidth: 60 }
        ],
        url:$('#initPath').val() +'/UserController.do?method=getUserPaging&privilege=-1', //必须这样，否则不能传page等参数
        pageSize:10, rownumbers:true,

2.action

public ModelAndView getUserPaging(DYRKBUser user, HttpServletRequest request) {

        int page = Integer.parseInt(request.getParameter("page"));
        int pagesize = Integer.parseInt(request.getParameter("pagesize"));

        if (user.getUserName() == null) {
            user.setUserName(""); //空串时可以搜索到所有此类用户
        }
        Integer privilege = user.getPrivilege();
        if (privilege == -1) {
            user.setPrivilege(null);
        }
        List<DYRKBUser> userList = userService.getUserPaging(user, page, pagesize);
        int total = userService.getUserTotalNum();
        Map<String, Object> model = new HashMap<String, Object>(1);
        model.put("Rows", userList); //数据要的就是Rows项
        model.put("Total", total);
        return new ModelAndView(Constants.JSON_VIEW, model);
    }

 

如果还提供了搜索功能，则必须要将数据加载方式设为dalay，并动态的修改url与page值

===========================

        delayLoad:true,//延迟加载，以后会动态修改url
        url:$('#initPath').val() +'/UserController.do?method=getUserPaging&privilege=-1', //必须这样，否则不能传page等参数
        pageSize:20,
        rownumbers:true,

 

         .......

         userGrid.loadData();

 

//搜索按钮触发的函数

var searchUser = function() {
    userGrid.options.url = $('#initPath').val() + '/UserController.do?method=getUserPaging&userName='+$("#userName").val()+'&privilege='+$("#privilege").val();
    userGrid.options.newPage = 1;
    userGrid.loadData();
};