PS:
看这个分页可以结合我上一篇的多级联动,分页显示是在多级联动之后显示的数据进行分页显示
1.导入分页的jar包
直接在pom.xml里面加
<!-- 导入pageHelper -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>5.0.0</version>
</dependency>
2.确定前端需要返回的参数
在前端页面中定义全局变量
3.SqlMapConfig.xml添加分页插件配置
<plugins>
<plugin interceptor="com.github.pagehelper.PageInterceptor">
<property name="helperDialect" value="mysql" />
<property name="reasonable" value="true" />
<property name="supportMethodsArguments" value="true" />
<property name="params" value="count=countSql" />
<property name="autoRuntimeDialect" value="true" />
</plugin>
</plugins>
4.写java后端的代码
4.1dao层
/**
* 通过地区ID获取公司列表
* @param districtId
* @return
*/
public List<Company> getCompanyListById(String districtId);
4.2Service层
@Autowired
private CompanyDao companyDao;
/**
* 根据地区ID获取公司列表
* @param districtId
* @return
*/
public List<Company> getCompanyListById(String districtId,int nowpagenumber,int length){
PageHelper.startPage(nowpagenumber, length);//设置紧跟着的查询请求,分页 效果
return companyDao.getCompanyListById(districtId);
}
4.3Controller
//自动载入
@Autowired
private CompanyService companyService;
//请求地址
@RequestMapping(value="/getCompanyListById.do")
//返回给前段一个json形式的数据,使用该注解需要在spring-mvc配置<mvc:annotation-driven/>,否则注解失效,前段无法接受到数据
@ResponseBody
public Map<String,Object> getCompanyListById(@RequestParam String districtId,@RequestParam int nowPageNumber,@RequestParam int length){
List<Company> list=companyService.getCompanyListById(districtId,nowPageNumber,length);
Map<String,Object> map=new HashMap<>();
//设置当前查询的数据
map.put("resultlist", list);
//设置当前页面数
map.put("nowpagenumber", nowPageNumber);
PageInfo<Company> page=new PageInfo<Company>(list);
map.put("countNumber", page.getPages());
return map;
}
5.写前端页面
前端用的jsp
//分页操作
function getCompanyInfo(nowpn){
$.ajax({
url:'/ssm/getCompanyListById.do',
type:'POST',
data:{
districtId:districtId,
nowPageNumber:nowpn,
length:length
},
dataType:'JSON',
success:function(map){
console.log(map)
pageCount=map.countNumber;
result=map.resultlist;
nowpagenumber=map.nowpagenumber;
console.log(nowpagenumber);
console.log(pageCount);
str = "";
for (var i = 0; i < result.length; i++) {
str += "<tr>";
str+="<td>"+(i+1)+"</td>";
str += '<td><input type="text" value="'+result[i].name+'" disabled="disabled" class="update" id="companyname'+result[i].id+'"/></td>';
str += '<td><input type="text" value="'+result[i].introduce+'" disabled="disabled" class="update" id="companyintroduce'+result[i].id+'"/></td>';
str += '<td><input type="text" value="'+result[i].post+'" disabled="disabled" class="update" id="companypost'+result[i].id+'"/></td>';
str += '<td><input type="text" value="'+result[i].num+'" disabled="disabled" class="update" id="companynum'+result[i].id+'"/></td>';
str += '<td><input type="text" value="'+result[i].salary+'" disabled="disabled" class="update" id="companysalary'+result[i].id+'"/></td>';
str += '<td class="edit"><a href="javascript:btn_edit('+result[i].id+',this)" id="a'+result[i].id+'">编辑</a></td>';
str += '<td class="delete"><a href="javascript:btn_delete('+result[i].id+',this)">删除</a></td>';
str += "</tr>";
}
$("#tbody").append(str);
// alert("显示页码")
//显示页码部分
$("#pageshow").empty();//清空页码显示栏
num_str="<li><a href='javascript:getDataBypageNumber("+(nowpn-1)+")'><<</a></li>";
for(var i=1;i<=pageCount;i++){
if(i==nowpagenumber){
num_str+="<li><a href='#' class='nowpage'>"+i+"</a></li>";
}else{
num_str +="<li><a href='javascript:getDataBypageNumber("+i+")'>"+i+"</a></li>";
}
}
num_str += "<li><a href='javascript:getDataBypageNumber("+(nowpn+1)+")'>>></a></li>";
console.log(num_str)
$('#pageshow').append(num_str)
},
error:function(e){
alert("网络连接错误");
}
});
}
边界检测
function getDataBypageNumber(pn){
if(pn<1){
alert("已经是第一页了")
return;
}else if(pn>pageCount){
alert("已经是最后一页了")
return;
}
getCompanyInfo(pn);
}
这里使用的是物理分页,使用了PageHelper插件帮我们自动实现limit限制,还是蛮方便的
物理分页优点:数据量特别大,不会导致内存的溢出.
缺点:经常需要和数据库交互.