实现效果
HTML:
<div class="panel admin-panel">
<tr>
<td colspan="8">
<div id="pageContext" class="pagelist">
<!-- <a href='javascript:void(0)' href="">上一页</a>-->
<!-- <span class="current">1</span>-->
<!-- <a href="">2</a>-->
<!-- <a href="">3</a>-->
<!-- <a href="">下一页</a><a href="">尾页</a>-->
</div>
</td>
</tr>
</div>
css:
.pagelist {padding:10px 0; text-align:center;}
.pagelist span,.pagelist a{ border-radius:3px; border:1px solid #dfdfdf;display:inline-block; padding:5px 12px;}
.pagelist a{ margin:0 3px;}
.pagelist span.current{ background:#09F; color:#FFF; border-color:#09F; margin:0 2px;}
.pagelist a:hover{background:#09F; color:#FFF; border-color:#09F; }
.pagelist a.current{background:#09F; color:#FFF; border-color:#09F; }
.pagelist label{ padding-left:15px; color:#999;}
.pagelist label b{color:red; font-weight:normal; margin:0 3px;}
js:
var pageSize = 5;
var thisPage = 1;
var maxPageNum = "";
function setPage(thisPage, total) {
//设置之前先清空
$("#pageContext").empty();
var content = "<a href='javascript:void(0)'>上一页</a>";
if (total%pageSize==0){
maxPageNum = parseInt(total/pageSize);
} else{
maxPageNum = parseInt(total/pageSize) + 1;
}
for (var i = 1; i <= maxPageNum; i++ ){
if (thisPage == i) {
content += "<a href='javascript:void(0)' class='current'>" + i + "</a>";
} else{
content += "<a href='javascript:void(0)'>" + i + "</a>";
}
}
content += "<a href='javascript:void(0)'>下一页</a><a href='javascript:void(0)'>尾页</a>";
$("#pageContext").append(content);
}
//发送ajax请求,获取分页数据
function gotoPage(thisPage) {
//请求参数
var list = {
"size" : pageSize,
"page" : thisPage
};
$.ajax({
url: '/education_portal_system_war/ad/findAd.action',
type: 'post',
dataType: 'json',
data : JSON.stringify(list),
contentType : 'application/json;charset=UTF-8',
headers: {
"Content-Type": "application/json",
"token": getCookieInfo("userInfo").t.token
},
success: function (data) {
if (data.status == 0) {
setData(data.t.rows);
setPage(data.t.page, data.t.total);
}
},
error: function (e) {
console.log("获取所有广告失败:" + e);
}
})
}
//点击页码
$("#pageContext").on('click', "a", function () {
thisPage = $(".current").text();
var selectPageNum = $(this).text();
if (selectPageNum == '上一页'){
if (thisPage != "1"){
thisPage = thisPage - 1;
}
} else if(selectPageNum == "下一页"){
if (thisPage != maxPageNum){
thisPage++;
}
} else if (selectPageNum == "尾页"){
thisPage = maxPageNum;
} else{
thisPage = selectPageNum;
}
console.log("selectPageNum:" + thisPage);
gotoPage(thisPage)
});
后端Page工具类
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Page<T> {
//总条数
private Integer total;
//每页显示的数量
private Integer size;
//当前页
private Integer page;
//结果集
private List<T> rows;
}
Controller:
/**
* 查找Ad
* @param adVO
* @return
*/
@RequestMapping(value = "/findAd", method = RequestMethod.POST)
public ResponseResult findAd(@RequestBody AdVO adVO){
ResponseResult<Page<Ad>> responseResult = new ResponseResult<>();
try {
Page<Ad> page = adService.queryAdByAdVO(adVO);
responseResult.setStatus(0);
responseResult.setT(page);
} catch (Exception e) {
responseResult.setStatus(404);
e.printStackTrace();
}
return responseResult;
}
Service:
@Override
public Page<Ad> queryAdByAdVO(AdVO adVO) throws Exception {
//查询参数的设置
adVO.setStartRow(adVO.getSize() * (adVO.getPage() - 1) );
adVO.setDel(0); //没删除的
//返回参数的设置
Page<Ad> page = new Page<>();
page.setSize(adVO.getSize()); //每页显示5条
page.setPage(adVO.getPage()); //当前页
page.setTotal(adMapper.countAd(adVO)); //总条数
page.setRows(adMapper.queryAdByAdVO(adVO)); //列表信息
return page;
}
Mapper:
/**
* 分页查询广告
* @param adVO
* @return
* @throws Exception
*/
List<Ad> queryAdByAdVO(AdVO adVO) throws Exception;
/**
* 查询广告总条数
* @param adVO
* @return
* @throws Exception
*/
Integer countAd(AdVO adVO) throws Exception;
Mapper.xml:
<select id="queryAdByAdVO" parameterType="com.qf.cd.vo.AdVO" resultType="com.qf.cd.pojo.Ad">
SELECT
*
FROM
t_ad
<where>
<if test="adId != null">
adId = #{adId}
</if>
<if test="del != null">
AND del = #{del}
</if>
</where>
LIMIT #{startRow}, #{size}
</select>
<select id="countAd" parameterType="com.qf.cd.vo.AdVO" resultType="java.lang.Integer">
SELECT
count(*)
FROM
t_ad
<where>
<if test="adId != null">
adId = #{adId}
</if>
<if test="del != null">
AND del = #{del}
</if>
</where>
</select>