分页JQ
Posted 命
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了分页JQ相关的知识，希望对你有一定的参考价值。
--页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title></title>
<#include "/jeecms_sys/head.html"/>
<link rel="shortcut icon" href="${base}/res/sui-build/docs/pictures/logo.png?r=2014.06.18">
<link id="docs-css" href="${base}/res/sui-build/docs/assets/css/docs.css?r=2014.06.30" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="${base}/res/sui-build/docs/assets/css/animate.css" />
<link type="text/css" rel="stylesheet" href="${base}/res/sui-build/docs/assets/js/google-code-prettify/prettify.css" />
<script src="${base}/res/sui-build/.package/js/sui.js?r=2014.06.30"></script>
<script src="${base}/res/sui-build/docs/assets/js/google-code-prettify/prettify.js"></script>
<script src="${base}/res/sui-build/docs/assets/zeroclipboard/ZeroClipboard.js"></script>
<script src="${base}/res/sui-build/docs/assets/js/application.js"></script>
<style type="text/css">
table
{
border-collapse: collapse;
border: none;
}
td
{
border: solid #000 1px;
}
</style>
<script type="text/javascript">
var themesUrl = "${base}/res/sui-build/.package/css/sui.css";
var themesAppendUrl = "${base}/res/sui-build/.package/css/sui-append.css";
var selected = localStorage.getItem("themes-name");
if(selected && !(selected == ‘default‘)) {
themesUrl = ‘${base}/res/sui-build/.package/css/sui-themes-‘ + selected + ".css";
themesAppendUrl = ‘${base}/res/sui-build/.package/css/sui-themes-‘ + selected + "-append.css";
$(function() {
var $select = $("#themes-select");
var $current = $select.find("[value=‘"+selected+"‘]");
$current.parent().addClass("active");
$select.find(">a > span").html($current.text())[0].className = $current[0].className;
});
}
$(‘<link href="‘ + themesUrl + ‘?r=2014.09.11" rel="stylesheet" id="sui-css" charset="utf-8">‘).insertBefore($("#docs-css"));
$(‘<link href="‘ + themesAppendUrl + ‘?r=2014.09.11" rel="stylesheet" id="sui-css-append" charset="utf-8">‘).insertBefore($("#docs-css"));
$(function(){
//分页初始化
$(‘#div1‘).pagination({
pages: ${totalPage },//总页数
styleClass: [‘pagination-large‘],
showCtrl: true,
displayPage: 6,
currentPage:${currentPage },//当前页数
onSelect: function (number) {
//跳转到点击的页面
location.href="list.do?currentPage="+number
}
});
});
</script>
</head>
<body>
<div class="page-positon ove">
<div class="position-div">当前位置: 测试页面</div>
</div>
<div class="body-box">
<table border=‘1‘ cellspacing="0" cellpadding="0">
<thead class="pn-lthead"><tr>
<th width="200">ID</th>
<th width="200">f1</th>
<th width="200">f2</th>
<th width="200">f3</th>
<tbody class="pn-ltbody">
<#list list as test>
<tr ><td>${test.id}</td><td>${test.f1}</td><td>${test.f2}</td><td>${test.f3}</td></tr>
</#list>
</tbody>
</table>
<div id = "div1" style="margin:0px auto;text-align:center;">
</div>
</div>
</body>
</html>
--后台
dao层
public List<Test> list(Page page) {
String hql = "from Test";
List list = getSession().createQuery(hql).setFirstResult((page.getCurrentPage()-1)*page.getPageSize()).setMaxResults(page.getPageSize()).list();
return list;
}
public int count() {
String hqlcount="select count(*) from Test";
Query querycount = getSession().createQuery(hqlcount);
Integer totalCount=Integer.parseInt(querycount.uniqueResult().toString());
return totalCount;
}
service层调用，action层
@RequestMapping(value = "/test/list.do")
public String listPage(ModelMap model,HttpServletRequest req,Page page) {
page.setTotalCount(testService.count());
page.setPageSize(3);
int currentPage = 1;
if(req.getParameter("currentPage") != null) {
currentPage = Integer.parseInt(req.getParameter("currentPage"));
}
page.setCurrentPage(currentPage);
List<Test> list = testService.list(page);
model.addAttribute("list",list);
req.setAttribute("page", page);
model.addAttribute("totalPage",page.getTotalPage());
model.addAttribute("currentPage", currentPage);
return "test/list";
}
--实体类
package com.jeecms.test.entity;
import java.io.Serializable;
public class Page implements Serializable {
private int pageSize;//每页显示的记录数
private int totalCount;//总共的记录数
private int totalPage;//总共页数 totalPage=totalCount%pageSize==0?totalPage=totalCount/pageSize:(totalPage=totalCount%pageSize+1)
private int currentPage;//当前页数
public int getPageSize() {
return pageSize;
}
public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
public int getTotalCount() {
return totalCount;
}
public void setTotalCount(int totalCount) {
this.totalCount = totalCount;
}
public int getTotalPage() {
return totalPage=totalCount%pageSize==0?totalPage=totalCount/pageSize:(totalPage=totalCount/pageSize+1);
}
public void setTotalPage(int totalPage) {
this.totalPage = totalPage;
}
public int getCurrentPage() {
return currentPage;
}
public void setCurrentPage(int currentPage) {
this.currentPage = currentPage;
}
}
以上是关于分页JQ的主要内容，如果未能解决你的问题，请参考以下文章