分页技术总结1--rose框架

        近来在开发项目中，做个一个分页功能，通过这几天的努力，终于把分页功能写完，总结如下：

        就拿我的项目为例：

        项目主要是在ROSE框架下开发，以controller层、dao层、model层为三层  。    

        数据库表：

        t_news

1、dao层（sql语句的编写）

      这层主要是分页算法的sql语句的写法

    @DAO
    public interface INewsDAO {
        final String TABLE_NAME = "t_news";
        @SQL("select count(1) from $TABLE_NAME");
        public int getCount();
        @SQL("select id,name,content,datetime from $TABLE_NAME limt :1,:2")
        public List<News> getList(int currentPage,int pageSize);
   }

2、controller层：

      @Path("/news")
      public class NewsController {
        @Autowired
        private INewsDAO newsDao;
        @Get("getAllNews")
        public String getAllNews(Invocation inv, @Param("currentPage") int currentPage) {
       
          int countPage = 0;
          int count = newsDao.getCount();
          if (count > 0) {
            if (count % 5 != 0) {
              countPage = count / 5 + 1;
            }
            else {
               countPage = count / 5;
            }
         }
         inv.addModel("countPage", countPage);
         if (currentPage <= 0) {
            currentPage = 1;
         }
         List<News> newslist = newsDao.getList((currentPage - 1) * 5, 5);
         inv.addModel("currentPage", currentPage);
         inv.addModel("newslist", newslist);
         return "content_manage";
       }

3、js分页工具

pageUtils.js:
   var pageUtil = {
   showPage : function(cPage,tPage,changeMethod){
   var currentPage = parseInt(cPage);
   var countPage = parseInt(tPage);
   var str = "";
   var startNum = 0;
     //head
        if (currentPage == 1) {
            str += "<span><</span>";
        }
        else {
            str += "<a href=\"javascript:void(0)\" οnclick=\""+changeMethod+"("+(currentPage-1)+")\"><</a>";
        }
        //startPage
     if(currentPage < 4||countPage < 6){
    startNum = 1;
    }else if(currentPage + 2 > countPage){
       startNum = countPage - 4;
    }else{
       startNum = currentPage - 2;
    }
    //Body
   for(var i = startNum; i < countPage + 1; i++){
       if(i==currentPage){
          str += "<span>"+i+"</span>";
       }else{
          str += "<a href=\"javascript:void(0)\" οnclick=\""+changeMethod+"("+i+")\">"+i+"</a>";
       }
       if(i == startNum + 4){
          break;
       }  }      //End
        if (currentPage == countPage) {
            str += "<span>></span>";
        }
        else {
            str += "<a href=\"javascript:void(0)\" οnclick=\""+changeMethod+"("+(currentPage+1)+")\">></a>";
        }
        document.getElementById("pagination").innerHTML = "";
         if(countPage>1){
             document.getElementById("pagination").innerHTML = str;
         }
    }
};

4、前台页面(content_manage.vm)

       

<script type="text/javascript" src="/项目名/js/pageUtil.js"></script>
      <script type="text/javascript" src="/项目名/js/jquery-1.7.1.js"></script>
<script type="text/javascript">
    pageUtil.showPage($!currentPage,$!countPage,"changePage");
    function changePage(currentPage){
          window.location.href="/news/getAllNews?currentPage="+currentPage;
    }
    
    $(document).ready(function() {
        for(var i=1;i<=$!countPage;i++) {
              var str="";
              if($!currentPage == i) {
              str = "<option value='"+i+"' selected='selected'>"+i+"</option>";
              }else {
             str = "<option value='"+i+"'>"+i+"</option>";
             }
          $('#page_select').append(str);
        }
    });
      $(function(){
        $('#page_select').change(function(){
        var num = $('#page_select').val();
          changePage(num);
        });
     });
</script>
 
<table id="proManTable" class="proManTable"cellpadding="0" cellspacing="0"> 
<tr><th/>id</th><th>标题</th><th>内容</th><th>提交时间</th</tr> 
<tr> 
#if(!$null.isNull($!newslist)&&$!newslist.size()>0)
 #foreach($c in $!newslist)
 <td >$!c.id</td> 
<td>$!c.name</td>
<td>$!c.content</td>
 <td>$!c.datetime</td> 
#end 
#end 
</tr> 
</table>
 <div > 
<div><span>共 $!countPage  页</span><strong>跳至第 <select id="page_select" ></select> 页</strong></div> 
<divclass="pagination" id="pagination"></div> 
</div>