页面是用的纯css的效果,没有使用bootstrap的框架,不然自带的分页是挺好用的,就不用麻烦了这边使用了jquery pagination分页插件来实现这个功能的,这边后台用的是struts2的框架,ssh的,jquery返回json数据,然后循环拼接table输入到页面,这个分页插件使用起来感觉还是比较简单,代码编辑比较少,也有样式可以选择,但是那样要导入pagination.css在div中的class修改样式不导入的话就只有默认样式,这边样式也没有调节,不是很美观,功能实现了,干货:
效果图:
jsp:
<script src="/UploadFiles/2021-04-02/jquery.pagination.js">js:
var pageIndex = -1; //页面索引初始值 var pageSize = 5; //每页显示条数初始化,修改显示条数,修改这里即可 var pageCount = 0; //每页显示条数初始化,修改显示条数,修改这里即可 InitTable(pageIndex); //Load事件,初始化表格数据,页面索引为0(第一页) //分页,PageCount是总条目数,这是必选参数,其它参数都是可选 //翻页调用 function PageCallback(index, jq) { InitTable(index); } //请求数据 function InitTable(pi) { var sendpn = 0; if(pi!=-1){ sendpn = pi; } $.ajax({ type: "POST", dataType: "json", url: 'findEquipmentInfo.action', //提交到一般处理程序请求数据 data: {pageNo:sendpn,pageSize:pageSize}, //提交两个参数:pageIndex(页面索引),pageSize(显示条数) success: function(data) { var tabletr=''; $(data.root).each(function(i,obj){ tabletr=tabletr+"<tr><td><input type='checkbox' class='checkboxAll' value='"+obj.id+"'/></td><td>"+obj.deviceName+"</td>"+"<td>"+obj.deviceIP+"</td>"+"<td>"+obj.companyName+"</td>"+"<td>"+obj.deviceSN+"</td>"+"<td>"+obj.devicePN+"</td>"+"<td>"+obj.inTime+"</td>"+"<td>"+obj.warrantyTime+"</td>"+"</tr>"; }); $("#tablepos_tbody").html(tabletr); pageCount = data.total; if(pageIndex==-1){ pageIndex=0; $("#Pagination").pagination(pageCount, { callback: PageCallback, //PageCallback() 为翻页调用次函数。 prev_text: "« 上一页", next_text: "下一页 »", items_per_page:pageSize, num_edge_entries: 2, //两侧首尾分页条目数 num_display_entries: 6, //连续分页主体部分分页条目数 current_page: pageIndex, //当前页索引 }); } } }); }action:
private int rowCount=0; private int pageNo=1; private int pageSize=10; private int pageCount=0; private String result; public int getRowCount() { return rowCount; } public void setRowCount(int rowCount) { this.rowCount = rowCount; } public int getPageNo() { return pageNo; } public void setPageNo(int pageNo) { this.pageNo = pageNo; } public int getPageSize() { return pageSize; } public void setPageSize(int pageSize) { this.pageSize = pageSize; } public int getPageCount() { return pageCount; } public void setPageCount(int pageCount) { this.pageCount = pageCount; } public String getResult() { return result; } public void setResult(String result) { this.result = result; }public String findEquipmentInfo(){ Page page =new Page(); page.setStart(pageSize*pageNo); page.setLimit((pageNo+1)*pageSize); page.setTotalCount(service.rowCount()); List list=service.allperson(pageNo, pageSize); System.out.println(pageNo+" "+pageSize ); this.setJsonStr(listToGridJoson(page, list)); return SUCCESS; }home:
int rowCount=0; public int rowCount(){ String sql = "select count(*) from EQUIPMENT_INFO"; Query query = sessionFactory.getCurrentSession().createSQLQuery(sql.toString()); int rowCount = Integer.parseInt(query.uniqueResult().toString()); return rowCount; } public List allperson(int pageNo,int pageSize){ System.out.println(pageNo); List list=this.all(pageNo, pageSize); return list; } public List all(int pageNo,int pageSize){ String sql = "from EquipmentInfo "; Query query = sessionFactory.getCurrentSession().createQuery(sql.toString()); query.setFirstResult(pageSize*pageNo); query.setMaxResults(pageSize); List list = query.list(); return list; }以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月25日
2024年09月25日
- 纯音入心系列纯音乐《中央民族乐团-古筝传奇》1CD[MP3][253.1MB]
- 江玲.1989-这样你才爱我,是吗?【新作有声】【WAV+CUE】
- 郭美美.2010-我是郭美美【华纳】【WAV+CUE】
- 黄心懋1991-轻忧郁【滚石】【WAV+CUE】
- 群星.2000-大地金曲世纪回顾2CD【大地】【WAV+CUE】
- 王菲.1996-浮躁(2024环球MQA-UHQCD限量版)【环球】【WAV+CUE】
- 群星.2022-传家电视剧原声带【东阳欢娱】【FLAC分轨】
- 《摇滚教父 伍佰黄金精选 2CD》 [WAV+CUE][1GB]
- 《凤凰传奇 我从草原来》[WAV/分轨][400MB]
- 《叶倩文 真心真意过一生》[WAV+CUE][400MB]
- 潘越云.1985-世间女子(滚石25周年经典复刻版)【滚石】【WAV+CUE】
- 陈柏宇.2009-CANT.BE.HALF【SONY】【WAV+CUE】
- 李明依.1989-小女生【滚石】【WAV+CUE】
- 《李荣浩 新时代创作新人王》[WAV分轨][310MB]
- 《黑鸭子与马头琴 史上最动听草原音乐》[WAV+CUE][320MB]