『实践』Java Web开发之分页(ajax)

2017-10-31 08:44:08来源:CSDN作者:landiljy人点击

分享
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、

 1 public class NewsListPage { 2  3     //当前页码 4     private int pageIndex; 5     //每页显示的记录条数 6     private int pageSize; 7     //总页数 8     private int pageCount; 9     //当前页的数据10     private List<News> newsList = new ArrayList<News>();11 } 
   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         //计算需要分的页数 8         int pageCount = 0; 9         if(count%pageSize == 0){10             pageCount = count/pageSize;11         }else{12             pageCount = count/pageSize + 1;13         }14         ......18         ......22         return newsListPage;23     }24     //获得newslist.jsp新闻信息列表25     public List<News> getNewsList(int pageSize,int pageIndex){26         List<News> newsList = iFrameDao.getNewsList(pageSize,pageIndex);27         return newsList;28     }29     30     //获得新闻记录总数31     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>

效果图:

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台