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>效果图：
