EasyUi组合条件分页查询

1.引入css与js文件

<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="themes/icon.css">
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script src="js/easyui-lang-zh_CN.js" type="text/javascript"
    charset="utf-8"></script>

 2.JSP中准备分页标签

        <!-- 如果pageBean的总数大于8显示分页 -->
        <c:if test="${pageBean.totalCount > 8}">
            <div id="paginationID"
                style="background: #efefef; border: 1px solid #ccc; width: 100%"></div>
        </c:if>

 

 3.JS动态创建分页

<script type="text/javascript">
//pagination组建名
$('#paginationID').pagination({
    //            组件属性
    "total": ${pageBean.totalCount},
    "pageSize": 8,
    "pageNumber": ${pageBean.currentPage},
    "pageList": [8],
    "layout": ['list', 'sep', 'first', 'prev', 'manual', 'next', 'last', 'links'],
    "onSelectPage": function(pageNumber, b) {
     /*     alert("pageNumber=" + pageNumber);
        alert("pageSize=" + b); */ 
        
        var url="${pageContext.request.contextPath }/fenYe?currentPage="+pageNumber+"&queryName=${queryName}&queryAddress=${queryAddress}&queryDate=${queryDate}&getTag=getMethod";
        url= encodeURI(url);
        window.location.href=url;     
    }
});
</script>

 

　　 pageSize:是默认的每页大小，pageNumber是页号，从pageBean中获取，pageList是支持的每页数量，layout是显示的控件。

　　onSelectPage是点击页号时进行的操作，第一个参数代表页号，第二个参数代表每页大小(EasyUI自动获取)。在函数中先创建一个带中文参数的URL，利用JS对该url进行编码，然后访问该URL。

　　后台对该编码后的中文参数进行解码:

　　　　String getTag = request.getParameter("getTag");
        // 组装查询条件
        Condition condition = new Condition();

        // 组装名称
        String queryName = request.getParameter("queryName");
        // 如果是点击页号提交方式为get提交进行转码
        if (getTag != null && !"".equals(getTag.trim())) {
            queryName = new String(queryName.getBytes("iso-8859-1"), "utf-8");
        }
        if (queryName != null && !"".equals(queryName)) {
            condition.setQueryName(queryName);
            // 回显数据
            request.setAttribute("queryName", queryName);
        }

　　上面的getTag标志是get方式提交，需要进行解码，如果为post提交不进入解码条件。

　　对提交的英文与数字参数不需要进行解码。

最终效果:

 

-----还有一种方式是:ajax采用post方式提交，请求JSON，然后将JSON填充到表格----

ajax使用方法

$.ajax({
            url:"${baseurl}/fenYe",
            async:true,
            type:"POST", 
date:{"currentPage":1,"queryName":"${queryName}","queryAddress":"${queryAddress}","queryDate":"${queryDate}"},
            success: function(data){
                },
            error:function(){
                alert("请求失败");
                },
            dataType:"json"
           
        });

 

 

function fun1() {
    $.get(
            "/Ajax/ajaxServlet2",    //请求地址
            //"name=qlq&password=qlq",   //请求参数
            {"name":"qlq","password":"nicai"},  //请求传递的参数，也可以是JSON
            function(data){     //data表示传递回来的数据，只有在成功的时候才有
                alert(data);
                },
                "json"         //表示返回内容的格式,json会将传回来的自动解析成json对象
    );
}




function fun2() {
    $.post(
            "/Ajax/ajaxServlet2",    //请求地址
            //"name=qlq&password=qlq",   //请求参数
            {"name":"qlq","password":"nicai"},  //请求传递的参数，也可以是JSON
            function(data){     //data表示传递回来的数据，只有在成功的时候才有
                alert(data);
                },
                "json"         //表示返回内容的格式,json会将传回来的自动解析成json对象
    );
}

 

 后台将查询到的数据转换为JSON串返回，ajax在成功的回调函数将JSON数据填入表格，关于JSON填充表格参考:http://www.cnblogs.com/qlqwjy/p/7307514.html