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