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>

 二.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自动获取)。在函数中先创建二个带汉语参数的U大切诺基L,利用JS对该url进行编码,然后访问该U福特ExplorerL。

  后台对该编码后的国语参数实行解码:

    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提交不进去解码条件。

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

最后效果:

图片 1

 

—–还有一种艺术是: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