ssm+Jquery+Ajax+pagehelper（頁面）
- 本篇文章分兩部分，這是頁面部分，還有後端部分。
- <!-- jsp頁面實現分頁功能必要3個js 。 1.jquery.js 2.jquery.paging.js 3. stringbuffer.js-->
- 注：上面js檔案可以到相應的官網下載。也可以進入連結後複製到自己新建的js 下，然後引入到需要分頁的頁面中。
- 下面是精簡後的jsp頁面。主要理解實現原理和過程。
<!--當點選查詢，呼叫queryReassign（）方法，並傳入初始頁面“1”-->
<input type="button" class="button" value="查詢" onclick="queryReassign(1);" stype="width:40px" />
<script type="text/javascript"> function queryReassign(page){
$.ajax({ type : "POST" ,url : "${pageContext.request.contextPath}/queryResult.action" ,data : {curr_page : page } ,dataType : 'json' ,async : true ,success : function(data){ $("#queryResult").show(); var sbHTML = new StringBuffer(); if(data == "undefined" || data.length <=0 ){ sbHTML.append("<tr> \n"); sbHTML.append(" <td colSpan='3'>沒有查詢到資料！</td> \n"); sbHTML.append("</tr> \n"); }else{ $("#buttonSave").attr("disabled", false); $("#applyReassign").attr("disabled",false); for(var i=0;i<data.length;i++){ sbHTML.append("<tr> \n"); sbHTML.append(" <td>" + (i+1)+ "</td> \n"); sbHTML.append(" <td><input type=\"readonly\" readonly name=\"userid\" id=\"userid"+i+"\" value=\"" + data[i].userid +"\"> </td> \n"); sbHTML.append(" <td><input type=\"readonly\" readonly name=\"Name\" id=\"Name"+i+"\" value=\"" + data[i].Name +"\"> </td> \n"); sbHTML.append("</tr> \n"); } } $("#queryResultTR").html(sbHTML.toString());
<!--下面是隔行變色 listodd 和listeven 需要自己寫--> $("#queryResultTR tr:nth-child(odd)").addClass("listodd"); $("#queryResultTR tr:nth-child(even)").addClass("listeven"); <!--分頁功能--> $('.spci_paging').paging({ current: (data.length > 0) ? data[0].curr_page : "1" ,max: (data.length > 0) ? data[0].page_size : 1 ,onclick: function(e, page) { queryReassign(page); <!--呼叫自己方法--> } }); } }); }
</script>
<!--是分頁功能的樣式--> <style> .spci_paging a { display:inline-block; padding:3px 6px; margin:0 6px; border:1px solid #111; background:#fff!important; } </style>
<from> <div id="queryResult" style="display:none;"> <!-- 查詢列表 --> <table class="list" cellpadding="2" cellspacing="0" id="queryResultTbl"> <tr> <td class="formtitle" colspan="12"><img src="/claim/images/imgformtitle.gif" align="absmiddle">查詢結果列表</td> </tr> <tr> <td style="width: 4%">序號</td> <td style="width: 48%">使用者id</td> <td style="width: 48%">使用者名稱</td> </tr> <tbody id="queryResultTR"/> </table> </div> <!-- 分頁功能 --> <div class="btn-group spci_paging"></div> <from>