使用Jquery.pagination插件实现分页

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>

秒客网

使用Jquery.pagination插件实现分页

相关文章