jquery+struts2.0分頁

最近要寫一個分頁的功能，找了很多的ajax分頁資料，都覺得不是很好，本來想用ext的，可是覺得速度有點慢，在加上公司明確要求用jquery+json 實現分頁，沒辦法，後來發現jquery的flexgrid的分頁還不錯。就花了點時間寫了個。

 

 java 程式碼：

 @Controller
public class InfoIssueAction extends PBaseAction {
 public InfoIssueAction(){};
 @Autowired
 InfoIssueService infoIssueService;

 List rows=new ArrayList();
 protected int rp;
 protected int page=1;
 protected int total;
 
 @SuppressWarnings("unchecked")
 public String showInfoIssue(){
  int startIndex = (page - 1) * rp;     //計算查詢開始資料下標       
  total=infoIssueService.getAllInfoIssue().size();
  List list=infoIssueService.getInfoIssue(startIndex, rp);
  for (Iterator iterator = list.iterator(); iterator.hasNext();) {
   InfoIssue infoissue = (InfoIssue) iterator.next();
     Map cellMap = new HashMap(); 
     cellMap.put("issueid", infoissue.getIssueid());
     cellMap.put("cell", new Object[] {infoissue.getIssueid(),infoissue.getCaption(),
       infoissue.getAttribute(),infoissue.getMaketop(),infoissue.getIssued()});
     rows.add(cellMap);
   
  }
  return "listSuccess";
 }

 @JSON(name="rows")
 public List getRows() {
  return rows;
 }

 public void setRows(List rows) {
  this.rows = rows;
 }

 public int getRp() {
  return rp;
 }

 public void setRp(int rp) {
  this.rp = rp;
 }

 public int getPage() {
  return page;
 }

 public void setPage(int page) {
  this.page = page;
 }

 public int getTotal() {
  return total;
 }

 public void setTotal(int total) {
  this.total = total;
 }

}

 

 

jsp程式碼:

需要匯入檔案,:

<link rel="stylesheet" type="text/css" href="grid/css/flexigrid/flexigrid.css"></link>
<script type="text/javascript" src="page/js/jquery.js"></script>
<script type="text/javascript" src="page/grid/flexigrid.js"></script>

 

<div class="bborderx">
<table id="flex1" style="display:none"></table>
</div>

 

js程式碼:

$("#flex1").flexigrid
   (
   {
   url: 'infoIssue/InfoIssue!show.action',
   dataType: 'json',
   colModel : [
    {display: '編號', name : 'issueid', width : 60, sortable : true, align: 'center'},
    {display: '標題', name : 'caption', width : 120, sortable : true, align: 'left'},
    {display: '是否置頂', name : 'maketop', width : 120, sortable : true, align: 'left'},
    {display: '是否釋出', name : 'issued', width : 120, sortable : true, align: 'left'}
    ],
   buttons : [
    {name: '增加', bclass: 'add', onpress : test},
    {name: '刪除', bclass: 'delete', onpress : test},
    {separator: true}
    ],
   searchitems : [
    {display: '標題', name : 'caption', isdefault: true}
    ],
   sortname: "issueid",
   sortorder: "asc",
   usepager: true,
   title: '新聞釋出 ',
   useRp: true,
   rp: 1,
   showTableToggleBtn: true,
   width: 600,
   height: 300
   }
   );
   function test(com,grid)
   {
    if (com=='刪除')
     {
         confirm('是否刪除這 ' + $('.trSelected',grid).length + ' 條記錄嗎?')
     }
    else if (com=='增加')
     {
      alert('增加一條！');
     }   
   }