頁面是用的純css的效果，沒有使用bootstrap的框架，不然自帶的分頁是挺好用的，就不用麻煩了這邊使用了jquery pagination分頁插件來實現這個功能的，這邊后臺用的是struts2的框架，ssh的，jquery返回json數據，然后循環拼接table輸入到頁面，這個分頁插件使用起來感覺還是比較簡單，代碼編輯比較少，也有樣式可以選擇，但是那樣要導入pagination.css在div中的class修改樣式不導入的話就只有默認樣式，這邊樣式也沒有調節，不是很美觀，功能實現了，干貨：
效果圖：
jsp：
<script src="<%=basePath %>bootstrap/js/jquery.pagination.js"></script> <div id="Pagination" class="pagination" text-align="right"><!-- 這里顯示分頁 --></div>
js：
var pageIndex = -1; //頁面索引初始值 var pageSize = 5; //每頁顯示條數初始化，修改顯示條數，修改這里即可 var pageCount = 0; //每頁顯示條數初始化，修改顯示條數，修改這里即可 InitTable(pageIndex); //Load事件，初始化表格數據，頁面索引為0（第一頁） //分頁，PageCount是總條目數，這是必選參數，其它參數都是可選 //翻頁調用 function PageCallback(index, jq) { InitTable(index); } //請求數據 function InitTable(pi) { var sendpn = 0; if(pi!=-1){ sendpn = pi; } $.ajax({ type: "POST", dataType: "json", url: 'findEquipmentInfo.action', //提交到一般處理程序請求數據 data: {pageNo:sendpn,pageSize:pageSize}, //提交兩個參數：pageIndex(頁面索引)，pageSize(顯示條數) success: function(data) { var tabletr=''; $(data.root).each(function(i,obj){ tabletr=tabletr+"<tr><td><input type='checkbox' class='checkboxAll' value='"+obj.id+"'/></td><td>"+obj.deviceName+"</td>"+"<td>"+obj.deviceIP+"</td>"+"<td>"+obj.companyName+"</td>"+"<td>"+obj.deviceSN+"</td>"+"<td>"+obj.devicePN+"</td>"+"<td>"+obj.inTime+"</td>"+"<td>"+obj.warrantyTime+"</td>"+"</tr>"; }); $("#tablepos_tbody").html(tabletr); pageCount = data.total; if(pageIndex==-1){ pageIndex=0; $("#Pagination").pagination(pageCount, { callback: PageCallback, //PageCallback() 為翻頁調用次函數。 prev_text: "« 上一頁", next_text: "下一頁 »", items_per_page:pageSize, num_edge_entries: 2, //兩側首尾分頁條目數 num_display_entries: 6, //連續分頁主體部分分頁條目數 current_page: pageIndex, //當前頁索引 }); } } }); } action：
private int rowCount=0; private int pageNo=1; private int pageSize=10; private int pageCount=0; private String result; public int getRowCount() { return rowCount; } public void setRowCount(int rowCount) { this.rowCount = rowCount; } public int getPageNo() { return pageNo; } public void setPageNo(int pageNo) { this.pageNo = pageNo; } public int getPageSize() { return pageSize; } public void setPageSize(int pageSize) { this.pageSize = pageSize; } public int getPageCount() { return pageCount; } public void setPageCount(int pageCount) { this.pageCount = pageCount; } public String getResult() { return result; } public void setResult(String result) { this.result = result; } public String findEquipmentInfo(){ Page page =new Page(); page.setStart(pageSize*pageNo); page.setLimit((pageNo+1)*pageSize); page.setTotalCount(service.rowCount()); List list=service.allperson(pageNo, pageSize); System.out.println(pageNo+" "+pageSize ); this.setJsonStr(listToGridJoson(page, list)); return SUCCESS; } home：
int rowCount=0; public int rowCount(){ String sql = "select count(*) from EQUIPMENT_INFO"; Query query = sessionFactory.getCurrentSession().createSQLQuery(sql.toString()); int rowCount = Integer.parseInt(query.uniqueResult().toString()); return rowCount; } public List allperson(int pageNo,int pageSize){ System.out.println(pageNo); List list=this.all(pageNo, pageSize); return list; } public List all(int pageNo,int pageSize){ String sql = "from EquipmentInfo "; Query query = sessionFactory.getCurrentSession().createQuery(sql.toString()); query.setFirstResult(pageSize*pageNo); query.setMaxResults(pageSize); List list = query.list(); return list; } 以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
