JQueryPagination分頁插件,ajax從struts請求數據
阿新 • • 發佈：2017-07-17
參數 ret closed struts2 全局 lib assembly tlist com 
2017-07-16
學完了struts,做了個關於分頁的小例子,用到了JQuery分頁插件Pagination,先貼下插件下載地址
http://www.jq22.com/jquery-info13734
插件作者對於參數講解的不夠詳細,琢磨了半天才明白怎麽用,不多說,直接代碼
1.客戶端(jsp頁面)
1 /*這些css為了控制生成的數據和分頁的li標簽的位置*/ 2 a { 3 text-decoration:none; 4 color:black; 5 font-weight: bold; 6 text-aligncss部分:center; 7 } 8 table { 9 width:500px; 10 height:300px; 11 text-align: center; 12 } 13 #table { 14 position:relative; 15 top:100px; 16 } 17 #page { 18 height:50px; 19 text-align:center; 20 position:relative; 21 top:100px; 22 } 23 #page li { 24 position:relative; 25 left:450px; 26 } 27 28 </style>
<!--一定要引入樣式表和js文件--> <link rel="stylesheet" type="text/css" href="pagination/page.css"> <script type="text/javascript" src="pagination/jquery.min.js"></script> <script type="text/javascript" src="pagination/page.js"></script>
1 <div id="table" align="center"></div> <!--用於顯示數據的div--> 2 <div id="page" class="page"></div> <!--div的class要設置成引入的css文件中的.page--> 3 4 <script type="text/javascript"> 5 var url ="${pageContext.request.contextPath}/show_list"; 6 var $table = $("<table border=‘2px‘ id=‘a‘ width=‘300px‘ height=‘200px‘></table>"); 7 var $tr = $("<tr display=‘none‘></tr>"); 8 var $td = $("<td>編號</td><td>姓名</td><td>薪水</td><td>部門</td><td>操作</td>"); 9 $tr.append($td); 10 $table.append($tr); 11 var datas = null; //datas,options一定要設置為全局變量,發現不設置成全局,沒法使用插件 12 var options = null; 13 var pagelistcount = 6; //每頁顯示數據個數 14 // var maxentries = 50; //要顯示的數據總量,未進行傳遞 15 $.ajax({ 16 url:url, 17 type:"GET", 18 data:null, 19 dataType:"json", 20 success:function(backdata) { 21 datas = backdata; 22 var a =eval(backdata); 23 options={ 24 "id":"page", //----顯示頁碼的元素(數據放在哪裏)---->上面的div標簽 25 "data":datas, //-----返回的數據---->json形式 26 "maxshowpageitem":10,//-----最多顯示的頁碼個數 27 "pagelistcount":pagelistcount,//-----每頁顯示數據個數,下面的callback是每個分頁插件都有的回調函數 28 "callBack":function(result){ //----result表示處理好的數據集,比如你設置了pagelistcount為6,那麽result就有6條數據 29 $("#table").append($table); 30 //遍歷生成表格並插入數據 31 $.each(result,function(index,emp) { 32 $tr = $("<tr></tr>"); 33 $table.append($tr); 34 for(var i=0; i<=4; i++) { 35 $td = $("<td></td>"); 36 $tr.append($td); 37 } 38 var $tr = $("table tr"); 39 //解決多生成表格的問題--->總數50,每頁6條,最後一頁不足6條,這樣解決多生成表格的問題 40 if($tr.size() > result.length) { 41 $("table tr:gt("+ result.length + ")").remove(); 42 } 44 var $td = $tr.eq(index+1).find("td"); 45 var info = $(result).get(index); 46 var $empId = $td.eq(0).text(info.empId); 47 var $empName = $td.eq(1).text(info.empName) 48 var $salary = $td.eq(2).text(info.salary); 49 var $dept = $td.eq(3).text(info.dept.deptName); 50 var $action = $td.eq(4).html("<a href=${update}?empId=" + info.empId+">修改</a> <a id =‘del" + info.empId + "‘ href=‘#‘>刪除</a>"); 51 $("#del" + info.empId).click(function () { 52 if(window.confirm("確定要刪除嗎?刪除之後無法恢復!!!")) { 53 $(this).attr("href","${delete}?empId=" + info.empId); 54 } 55 }) 56 }); 57 } 58 }; 59 page.init(datas.length,1,options); //執行分頁,1表示加載完成後顯示為第一頁 60 } 61 }); 62 </script> 63 64 </body> 65 66
2.服務器
使用了struts並且返回的數據是json格式所以要引入以下jar文件
struts部分 commons-fileupload-1.2.2.jar commons-io-2.0.1.jar commons-lang3-3.1.jar freemarker-2.3.19.jar javassist-3.11.0.GA.jar ognl-3.0.5.jar struts2-core-2.3.4.1.jar xwork-core-2.3.4.1.jar json部分 struts2-json-plugin-2.3.4.1.jar json-lib-2.3-jdk15.jar commons-beanutils-1.7.0.jar commons-collections-3.1.jar ezmorph-1.0.3.jar commons-logging-1.1.1.jarView Code
如果采用用戶庫的方式添加的話要註意把jar包部署到tomcat中
項目(右擊)--->buildPath--->configure build path---->搜索deployment Assembly--->add--->java build path entries
或者直接在webRoot下的lib放jar包然後添加到項目中即可(變成奶瓶!!才可以)
如何讓struts返回json文本?
1.包繼承 json-default,
2.result中 type="json",params中寫好要轉換的對象
3.action中一定要為要轉換的對象設置get方法,並且要轉換的對象不能為null!!
配置文件
<package name="xxxx" extends="json-default"> <action name="show_*" class="employeeAction" method="{1}"> <result name="list" type="json"> <param name="root">listEmployees</param> <!--name="root"獲得根級對象,具體自行百度--> </result> </action>
action
private List<Employee> listEmployees; //使用json時只需設置get方法 public List<Employee> getListEmployees() { return listEmployees; } /** * 員工列表展示 * @return */ public String list() { listEmployees = employeeService.getAll();//註意賦值 return "list"; }
當然除了利用struts返回json也可以直接寫個servlet返回數據,具體不再贅述
本人新手一枚,多有不足還望海涵,批評指正!!!
JQueryPagination分頁插件,ajax從struts請求數據