使用Jquery.pagination插件实现分页

最新推荐文章于 2020-05-08 21:02:01 发布

hanaixia2007

最新推荐文章于 2020-05-08 21:02:01 发布

阅读量2.8k

点赞数

分类专栏： jsp 文章标签： integer exception function stylesheet callback string

本文链接：https://blog.csdn.net/zxsydyq/article/details/7652921

版权

jsp 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Jquery.pagination插件进行分页功能的实现，包括引入必要的js和css文件，以及配置页面的js代码来调用插件并设置回调函数。

摘要由CSDN通过智能技术生成

1.使用插件为 jquery.pagination.js

首先引用 jquery.pagination.js （分页js），跟pagination.css（分页样式css）。

2.页面js代码为

<link href="${pageContext.request.contextPath }/css/pagination.css"
			rel="stylesheet" type="text/css" />
		<script type="text/javascript"
			src="${pageContext.request.contextPath }/js/jquery-1.6.min.js"></script>
		<script
			src="${pageContext.request.contextPath }/js/jquery.pagination.js"
			type="text/javascript"></script>

		<script type="text/javascript"> 
			var pageIndex = 0; //页面索引初始值 
			var pageSize = 3; //每页显示条数初始化，修改显示条数，修改这里即可 
			$(function () { 
			InitTable(0); //Load事件，初始化表格数据，页面索引为0（第一页） 
				//分页，PageCount是总条目数，这是必选参数，其它参数都是可选 
			$("#Pagination").pagination(<%=request.getAttribute("countPages")%>, { 
			callback: PageCallback, //PageCallback() 为翻页调用次函数。 
			prev_text: "« 上一页", 
			next_text: "下一页 »", 
			items_per_page:1, 
			num_edge_entries: 1, //两侧首尾分页条目数 
			num_display_entries: 3, //连续分页主体部分分页条目数 
			current_page: pageIndex, //当前页索引 
			}); 
			//翻页调用 
			function PageCallback(index, jq) { 
				InitTable(index); 
			} 
			//请求数据 
			function InitTable(pageIndex) { 
			$.ajax({ 
				type: "POST", 
				dataType: "text", 
				url: '${pageContext.request.contextPath}/servlet/selectItemServlet', //提交到一般处理程序请求数据 
				data: "pageIndex=" + pageIndex + "&pageSize=" + pageSize, //提交两个参数：pageIndex(页面索引)，pageSize(显示条数) 
				success: function(data) { 
				$("#Result tr:gt(0)").remove(); //移除Id为Result的表格里的行，从第二行开始（这里根据页面布局不同页变） 
				$("#Result").append(data); //将返回的数据追加到表格 
				} 
			}); 
			} 
		}); 
</script>

3、页面<body>里面的代码为

<table id="Result" cellspacing="0" cellpadding="0">
			<tr>
				<th>
					项目名称
				</th>
				<th>
					项目类型
				</th>
			</tr>
		</table>
		
		<div id="Pagination" class="pagination"></div>

4、页面后台代码为selectItemServlet

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

		response.setHeader("Pragma", "No-cache");
		response.setHeader("Cache-control", "no-cache");
		response.setDateHeader("Expires", 0);
		response.setContentType("text/html;utf-8");
		response.setCharacterEncoding("utf-8");
		
		PrintWriter out = response.getWriter();
		String pageIndex = request.getParameter("pageIndex").trim();
		String pageSize = request.getParameter("pageSize").trim();
		StringBuffer sb = new StringBuffer();
		
		ItemService itemService = new ItemService();
		
		List<GameItem> itemList = new ArrayList<GameItem>();
		
		itemList = itemService.selectItemsByPage(Integer.parseInt(pageIndex),Integer.parseInt(pageSize));
		for (int i = 0; i < itemList.size(); i++) {
			sb.append("<tr><td>");
			sb.append(itemList.get(i).getItemname());
			sb.append("</td><td>");
			sb.append(itemList.get(i).getItemtype());
			sb.append("</td></tr>"); 	
		}
		
		
		out.println(sb);
		out.flush();
		out.close();
	
	}

5、selectCountItemServlet

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setHeader("Pragma", "No-cache");
		response.setHeader("Cache-control", "no-cache");
		response.setDateHeader("Expires", 0);
		response.setContentType("text/html;utf-8");
		response.setCharacterEncoding("utf-8");
		ItemService itemService = new ItemService();
		Integer pageSize = Integer.parseInt(request.getParameter("pageSize").trim());	
		Integer counts = itemService.selectCountsItem();
		Integer countPages = counts / pageSize + 1; 
		request.setAttribute("countPages", countPages);
		request.getRequestDispatcher("/select1.jsp").forward(request, response);
	}

6、QueryItemDAO

	  /**
	   * han
	   * 根据页码查询项目信息
	   * @return
	   */
	public List<GameItem> selectItemsByPage(int pageIndex, int pageSize) {
		List<GameItem> itemList = new ArrayList<GameItem>();
		Connection conn = null;
		try {
			conn = db.getConn();
		    rs=conn.createStatement().executeQuery("select * from t_item limit "+ pageIndex*pageSize+", "+pageSize);
			while (rs.next()) {
				GameItem gameitem = new GameItem();
				gameitem.setItemname(rs.getString("itemname"));
				gameitem.setItemtype(rs.getString("itemtype"));
			
				itemList.add(gameitem);
			}
		} catch (Exception ee) {
			ee.printStackTrace();
		}
		db.freeConnection(conn);
		
		return itemList;
	}
	
	  /**
	   * han
	   * 查询项目总数
	   * @return
	   */
	public Integer selectCountsItem() {
		
		Connection conn = null;
		Integer counts = 0;
		try {
			conn = db.getConn();
		    rs=conn.createStatement().executeQuery("select count(*) from t_item");
			while (rs.next()) {
				counts = rs.getInt(1);
			}
		} catch (Exception ee) {
			ee.printStackTrace();
		}
		db.freeConnection(conn);
		
		return counts;
	}

7、left.jsp页面

 <li> <a class="head">综合查询</a>
      <ul>
        <li><a href="/hbcitsports/servlet/selectCountItemServlet?pageSize=3" target="rightFrame">综合查询</a></li>
      </ul>
    </li>