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){ PageBean cutBean=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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。