『實踐』Java Web開發之分頁（ajax）

1、需要用到的jar包、js文件

  JSONArray().fromObject（）需要的jar包：

（1）commons-beanutils-1.8.3.jar

（2）commons-collections-3.2.1.jar

（3）commons-lang-2.6.jar

（4）commons-logging-1.1.1.jar

（5）ezmorph-1.0.6.jar

（6）json-lib-2.4-jdk15.jar

jqPaginator分頁組件：http://jqpaginator.keenwon.com/

（1）jquery-1.11.0.min.js

（2）jqPaginator.min.js

 

2、

public class NewsListPage {

    //當前頁碼
    private int pageIndex;
    //每頁顯示的記錄條數
    private int pageSize;
    //總頁數
    private int pageCount;
    //當前頁的數據
    private List<News> newsList = new ArrayList<News>();
} 

   1 //獲得分頁的新聞信息列表

  public NewsListPage getNewsListPage(int pageSize,int pageIndex){
  3         NewsListPage newsListPage = new NewsListPage();  4         List<News> newsList = iFrameDao.getNewsList(pageSize, pageIndex);  5         int count = iFrameDao.getNewsCount(); 7         //計算需要分的頁數
        int pageCount = 0;  9         if(count%pageSize == 0){ 10             pageCount = count/pageSize; 11         }else{ 12             pageCount = count/pageSize + 1; 13  } 14  ......
        ......22         return newsListPage; 23  } 24     //獲得newslist.jsp新聞信息列表
    public List<News> getNewsList(int pageSize,int pageIndex){ 26         List<News> newsList = iFrameDao.getNewsList(pageSize,pageIndex); 27         return newsList; 28  } 29     
    //獲得新聞記錄總數
    public int getNewsCount(){ 32         int count = iFrameDao.getNewsCount(); 33         return count; 34     }

servlet:

public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        IFrameBll iframeBll = new FrameBll();
        
        // 設定默認的每頁顯示條數
        int pageSize = 15;
        // 設定默認的頁碼數
        int pageIndex = 1;
        String currentIndex = request.getParameter("pageIndex");
        if(currentIndex != null){
            pageIndex = Integer.parseInt(currentIndex);
        }
        //獲得分頁的新聞信息列表
        NewsListPage newsListPage = iframeBll.getNewsListPage(pageSize,pageIndex);
        JSONArray json = null;
        json=new JSONArray().fromObject(newsListPage);
        PrintWriter out = response.getWriter();
        out.write(json.toString());
        out.flush();
        out.close();
    }

js:

/**
 * newslist.jsp
 */
var model = {  
        pageIndex: 1,      //索引頁  
        pageSize: 3,      //每頁列表的行數  
        //filterCounts: 1,   //篩選后的總行數  
        pageCount: 1,//總頁數
    }; 

    $(document).ready(function () {  
        Filter();  
    });
    
    function Filter() {  
        $.ajax({  
            type:"POST",  
            dataType:"json",  
            url:"news.do",   //回發到的頁面  
            data:"pageIndex=" + model.pageIndex + "&pageSize=" + model.pageSize,
            //async:false, 
            cache:false, 
            success: function(data) {
                var newsdata = eval(data);
                if (newsdata[0].pageCount == 0 ) {
                        //model.filterCounts = 1;
                }else{
                    model.pageSize = newsdata[0].pageSize;
                    model.pageCount = newsdata[0].pageCount;
                    model.pageIndex = newsdata[0].pageIndex;
                }  
                $("#news").empty();   //清空div中內容
                $("#news").append('<ul id="ulnews" class="allnews">'+'</ul>');
                
                $.each(newsdata[0].newsList, function (index, content) {
                    。。。。。
　　　　　　　　　　　　顯示的數據，具體樣式自定義。
 。。。。。

                })
                
                paginator(model.pageIndex, model.pageSize,model.pageCount); 
                
            },
            error:function(){
                $("#news").empty();   //清空div中內容
                $("#news").append('<strong><p style="text-indent:2em">No Contents</p></strong>');
            }
        });  
    }
    
    function paginator(pageIndex, pageSize, pageCount) {  
        $.jqPaginator('#jqPaginator', {
            totalPages: pageCount,
            visiblePages: 10,
            currentPage: pageIndex,
            pageSize: pageSize,
            first: '<li><a href="javascript:void(0);">First<\/a><\/li>',  
            prev: '<li><a href="javascript:void(0);">Previous<\/a><\/li>',  
            next: '<li><a href="javascript:void(0);">Next<\/a><\/li>',  
            last: '<li><a href="javascript:void(0);">Last<\/a><\/li>',  
            page: '<li><a href="javascript:void(0);">{{page}}<\/a><\/li>',
            onPageChange: function (n, type) {  
                if (type == 'change' && n != model.pageIndex) {  
                    model.pageIndex = n;    //點擊改變頁碼時，同步model中的頁碼  
                    Filter();               //重新生成新表  
                }  
            }
        });
    }

jsp:

          <h2>News</h2>
               <div id="news" style="height:350px">
               <strong><p style="text-indent:2em">No Contents</p></strong>
               </div>
               <div align="center">
               <ul class="pagination" id="jqPaginator"></ul>
               </div>

效果圖：