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