溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

jquery pagination分頁(yè)插件使用詳解（后臺(tái)struts2）

發(fā)布時(shí)間：2020-10-14 18:49:13 來源：腳本之家 閱讀：197 作者：Java軟件小白 欄目：web開發(fā)

頁(yè)面是用的純css的效果，沒有使用bootstrap的框架，不然自帶的分頁(yè)是挺好用的，就不用麻煩了這邊使用了jquery pagination分頁(yè)插件來實(shí)現(xiàn)這個(gè)功能的，這邊后臺(tái)用的是struts2的框架，ssh的，jquery返回json數(shù)據(jù)，然后循環(huán)拼接table輸入到頁(yè)面，這個(gè)分頁(yè)插件使用起來感覺還是比較簡(jiǎn)單，代碼編輯比較少，也有樣式可以選擇，但是那樣要導(dǎo)入pagination.css在div中的class修改樣式不導(dǎo)入的話就只有默認(rèn)樣式，這邊樣式也沒有調(diào)節(jié)，不是很美觀，功能實(shí)現(xiàn)了，干貨：

效果圖：

jquery pagination分頁(yè)插件使用詳解（后臺(tái)struts2）

jsp：

<script src="<%=basePath %>bootstrap/js/jquery.pagination.js"></script> 
<div id="Pagination" class="pagination" text-align="right"><!-- 這里顯示分頁(yè) --></div>

js：

var pageIndex = -1;  //頁(yè)面索引初始值 
 var pageSize = 5;  //每頁(yè)顯示條數(shù)初始化，修改顯示條數(shù)，修改這里即可 
 var pageCount = 0;  //每頁(yè)顯示條數(shù)初始化，修改顯示條數(shù)，修改這里即可 
 InitTable(pageIndex); //Load事件，初始化表格數(shù)據(jù)，頁(yè)面索引為0（第一頁(yè)） 
  //分頁(yè)，PageCount是總條目數(shù)，這是必選參數(shù)，其它參數(shù)都是可選 
  //翻頁(yè)調(diào)用 
 function PageCallback(index, jq) { 
  InitTable(index); 
  } 
 
 //請(qǐng)求數(shù)據(jù) 
 function InitTable(pi) { 
  var sendpn = 0; 
  if(pi!=-1){ 
   sendpn = pi; 
  } 
  $.ajax({ 
   type: "POST", 
   dataType: "json", 
   url: 'findEquipmentInfo.action',  //提交到一般處理程序請(qǐng)求數(shù)據(jù) 
   data: {pageNo:sendpn,pageSize:pageSize},   //提交兩個(gè)參數(shù)：pageIndex(頁(yè)面索引)，pageSize(顯示條數(shù)) 
   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() 為翻頁(yè)調(diào)用次函數(shù)。 
      prev_text: "« 上一頁(yè)", 
      next_text: "下一頁(yè) »", 
      items_per_page:pageSize, 
      num_edge_entries: 2,  //兩側(cè)首尾分頁(yè)條目數(shù) 
      num_display_entries: 6, //連續(xù)分頁(yè)主體部分分頁(yè)條目數(shù) 
      current_page: pageIndex, //當(dāng)前頁(yè)索引 
     }); 
    } 
   } 
  }); 
 }

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; 
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手