bootstrap table服务端实现分页效果
实现bootstraptable服务端实现分页demo,具体内容如下
首页index.html
Demo
实现bootstraptable服务端实现分页demo,具体内容如下
首页index.html
Demo
index.js
$(function(){
//初始化表格
initTable();
//搜索按钮触发事件
$("#eventquery").click(function(){
$('#eventTable').bootstrapTable(('refresh'));//很重要的一步,刷新url!
//console.log("/program/area/findbyItem?offset="+0+"&"+$("#areaform").serialize())
$('#eventqueryforminput[name=\'name\']').val('')
$('#eventqueryforminput[name=\'seqNo\']').val('')
});
});
//表格初始化
functioninitTable(){
$('#eventTable').bootstrapTable({
method:'post',//向服务器请求方式
contentType:"application/x-www-form-urlencoded",//如果是post必须定义
url:'/bootstrap_table_demo/findbyitem',//请求url
cache:false,//是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
striped:true,//隔行变色
dataType:"json",//数据类型
pagination:true,//是否启用分页
showPaginationSwitch:false,//是否显示数据条数选择框
pageSize:10,//每页的记录行数(*)
pageNumber:1,//table初始化时显示的页数
pageList:[5,10,15,20],//可供选择的每页的行数(*)
search:false,//不显示搜索框
sidePagination:'server',//服务端分页
classes:'tabletable-bordered',//Class样式
//showRefresh:true,//显示刷新按钮
silent:true,//必须设置刷新事件
toolbar:'#toolbar',//工具栏ID
toolbarAlign:'right',//工具栏对齐方式
queryParams:queryParams,//请求参数,这个关系到后续用到的异步刷新
columns:[{
field:'seqNo',
title:'编号',
align:'center'
},{
field:'name',
title:'姓名',
align:'center'
},{
field:'sex',
title:'性别',
align:'center'
},{
field:'id',
title:'操作',
align:'center',
width:'280px',
formatter:function(value,row,index){
//console.log(JSON.stringify(row));
}
}],
});
}
//分页查询参数,是以键值对的形式设置的
functionqueryParams(params){
return{
name:$('#eventqueryforminput[name=\'name\']').val(),//请求时向服务端传递的参数
seqNo:$('#eventqueryforminput[name=\'seqNo\']').val(),
limit:params.limit,//每页显示数量
offset:params.offset,//SQL语句偏移量
}
}
服务端servlet
/**
*Servlet实现类
*/
publicclassUserFindByItemSetvletextendsHttpServlet{
privatestaticfinallongserialVersionUID=1L;
privateIUserServiceservice=newUserServiceImpl();
publicUserFindByItemSetvlet(){
super();
}
protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{
this.doPost(request,response);
}
protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{
request.setCharacterEncoding("utf-8");
response.setContentType("text/json;charset=UTF-8");
//得到表单数据
intoffset=Integer.parseInt(request.getParameter("offset").trim());
intlimit=Integer.parseInt(request.getParameter("limit").trim());
StringseqNo=request.getParameter("seqNo").trim();
Stringname=request.getParameter("name").trim();
//调用业务组件,得到结果
PageBeanpageBean;
try{
pageBean=service.findByItem(offset,limit,seqNo,name);
ObjectMapperoMapper=newObjectMapper();
//对象转换为json数据,且返回
oMapper.writeValue(response.getWriter(),pageBean);
}catch(Exceptione){
e.printStackTrace();
}
}
}
分页封装类
/** *分页实体类 */ publicclassPageBean{ /**行实体类*/ privateList rows=newArrayList (); /**总条数*/ privateinttotal; publicPageBean(){ super(); } publicList getRows(){ returnrows; } publicvoidsetRows(List rows){ this.rows=rows; } publicintgetTotal(){ returntotal; } publicvoidsetTotal(inttotal){ this.total=total; } }
获取用户实现类
publicclassUserServiceImplimplementsIUserService{
/**
*sql查询语句
*/
publicPageBeanfindByItem(intoffset,intlimit,StringseqNo,Stringname){
PageBeancutBean=newPageBean();
//基本SQL语句
Stringsql="SELECT*FROMc_userinfowhere1=1";
//动态条件的SQL语句
StringitemSql="";
if(seqNo!=null&&seqNo.length()!=0){
itemSql+="andSeqNolike'%"+seqNo+"%'";
}
if(name!=null&&name.length()!=0){
itemSql+="andNamelike'%"+name+"%'";
}
//获取sql连接
Connectioncon=DButil.connect();
PreparedStatementps=null;
ResultSetrs=null;
try{
ps=con.prepareStatement(sql+itemSql+"limit?,?");
ps.setInt(1,offset);
ps.setInt(2,limit);
rs=ps.executeQuery();
while(rs.next()){
UserBeanbean=newUserBean();
bean.setSeqNo(rs.getInt("seqNo"));
bean.setName(rs.getString("name"));
bean.setSex(rs.getInt("sex"));
bean.setBirth(rs.getString("birth"));
cutBean.getRows().add(bean);
}
//得到总记录数,注意,也需要添加动态条件
ps=con.prepareStatement("SELECTcount(*)ascFROMc_userinfowhere1=1"+itemSql);
rs=ps.executeQuery();
if(rs.next()){
cutBean.setTotal(rs.getInt("c"));
}
}catch(SQLExceptione){
e.printStackTrace();
}finally{
DButil.close(con);
if(ps!=null){
try{
ps.close();
}catch(SQLExceptione){
e.printStackTrace();
}
}
if(rs!=null){
try{
rs.close();
}catch(SQLExceptione){
e.printStackTrace();
}
}
}
returncutBean;
}
}
数据库工具类
/**
*数据库工具类
*
*@authorway
*
*/
publicclassDButil{
/**
*连接数据库
*
*/
publicstaticConnectionconnect(){
Propertiespro=newProperties();
Stringdriver=null;
Stringurl=null;
Stringusername=null;
Stringpassword=null;
try{
InputStreamis=DButil.class.getClassLoader()
.getResourceAsStream("DB.properties");
pro.load(is);
driver=pro.getProperty("driver");
url=pro.getProperty("url");
username=pro.getProperty("username");
password=pro.getProperty("password");
Class.forName(driver);
Connectionconn=DriverManager.getConnection(url,username,
password);
returnconn;
}catch(FileNotFoundExceptione){
e.printStackTrace();
}catch(IOExceptione){
e.printStackTrace();
}catch(ClassNotFoundExceptione){
e.printStackTrace();
}catch(SQLExceptione){
e.printStackTrace();
}
returnnull;
}
/**
*关闭数据库
*
*@paramconn
*
*/
publicstaticvoidclose(Connectioncon){
if(con!=null){
try{
con.close();
}catch(SQLExceptione){
e.printStackTrace();
}
}
}
DB.properties文件
driver=com.mysql.jdbc.Driver url=jdbc:mysql://localhost:3306/gov_social?useUnicode\=true&characterEncoding\=utf-8 username=root password=root
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。