jQuery分页插件(jquery.page.js)的使用
2023-09-14 08:56:58 时间
效果描述:
不用分页即可显示的jQuery插件
jQuery分页插件——jQuery.page.js用法很简单,效果很棒
1.前端
首先html的head中引入相关css与js
<link rel="stylesheet" href="/css/page.css" /> <script type="text/javascript" src="/js/jquery.min.js"></script> <script type="text/javascript" src="/js/jquery.page.js"></script>
html的body中
<div id="pager"></div>
html的head中添加
<script type="text/javascript"> $(function(){ //自动加载 loadMyEssay(); function loadMyEssay() { var pageSize = 5; $(document).ready(function() { //设置默认第1页 init(1); }); //默认加载 function init(pageNo){ $("#result").html(""); $.ajax({ url:"/frame/myEssay"+'/'+pageNo+'/'+pageSize, type:"get", contentType:"application/json;charset=utf-8", dataType:"json", success:function(data){ //i表示在data中的索引位置,n表示包含的信息的对象 $.each(data.datas,function(i,n){ //获取对象中属性为value的值 var essayId = n.id; var essayTitle = n.title; var createTime = new Date(n.createTime).pattern("yyyy-MM-dd hh:mm:ss"); var admire = n.admireCount; var evaluate = n.evaluateCount; var blog = '<tr>'+ '<td>'+ '<img alt="头像" src="/img/logo.jpg">'+ '</td>'+ '<td>'+ '<a href="/views/blogDetail.html?essayId='+essayId+'"> '+essayTitle+'</a>'+ '<br>'+ '<br>'+ '<span>'+createTime+'<span>'+ '</td>'+ '</tr>'+ '<tr>'+ '<td>'+ '<a href="#">赞(<span style="color: red; cursor: pointer">'+admire+'</span>)</a>'+ '<a href="#">评论(<span style="color: red; cursor: pointer">'+evaluate+'</span>)</a>'+ '</td>'+ '</tr>'; $('#result').append(blog); }); $("#pager").pager({ pagenumber: pageNo, pagecount:data.pageCount, totalcount:data.total, buttonClickCallback: PageClick }); }, error:function(){ alert("error"); } }); } //回调函数 PageClick = function(pageclickednumber) { init(pageclickednumber); } } }); </script>
2.后台
controller
@RequestMapping(value="/myEssay/{pageNo}/{pageSize}", method=RequestMethod.GET, produces=JsonUtil.JSON) public PageDto findMyEssay(@PathVariable int pageNo, @PathVariable int pageSize) { String userId = userService.currentUserId(); return essayService.findMyEssay(userId, pageNo, pageSize); }
service(Jpa的分页方法)
public PageDto findMyEssay(String userId, int pageNo, int pageSize) { pageNo--; PageDto pageDto = new PageDto(); //排序Sort //Sort sort = new Sort(Sort.Direction.DESC, "createdate").and(new Sort(Sort.Direction.AES, "id")); //Pageable pageable = new PageRequest(1, 10, sort); Sort sort = new Sort(Sort.Direction.DESC, "createTime"); Pageable pageable = new PageRequest(pageNo, pageSize, sort); Page<Essay> essays = essayDao.findByUser(userDao.findOne(userId), pageable); List<EssayDto> essayDtos = new ArrayList<EssayDto>(); for (Essay essay : essays) { EssayDto essayDto = new EssayDto(); essayDto.setId(essay.getId()); essayDto.setTitle(essay.getTitle()); essayDto.setCreateTime(essay.getCreateTime()); int admireCount = admireDao.findByEssay(essay).size(); int evaluateCount = evaluateDao.findByEssay(essay).size(); essayDto.setAdmireCount(admireCount); essayDto.setEvaluateCount(evaluateCount); essayDtos.add(essayDto); } pageDto.setTotal((int)essays.getTotalElements()); pageDto.setDatas(essayDtos); pageDto.setPageCount(essays.getTotalPages()); return pageDto; }
原生sql的分页方法 参考的 service
public PageDto findAllEssay(String type,int pageNo,int pageSize) throws ParseException { pageNo--; PageDto pageDto = new PageDto(); if (type.equals("today")) { String sql = "FROM essay WHERE create_time LIKE '" + new SimpleDateFormat("yyyy-MM-dd").format(new Date()) + " %' ORDER BY create_time DESC"; return findEssayPage(pageNo, pageSize, pageDto, sql, type); } else if (type.equals("5_essay")) { String sql = "FROM essay ORDER BY create_time DESC LIMIT 0,5"; return findEssayPage(0, 5, pageDto, sql, type); } else { String sql = "FROM essay ORDER BY create_time DESC"; return findEssayPage(pageNo, pageSize, pageDto, sql, type); } } private PageDto findEssayPage(int pageNo, int pageSize, PageDto pageDto, String sql, String type) { Query query = entityManager.createNativeQuery("SELECT * " + sql, Essay.class); BigInteger count_number = null; if (!type.equals("5_essay")) { //总记录数 Query query_number = entityManager.createNativeQuery("SELECT COUNT(*) " + sql); count_number = (BigInteger) query_number.getSingleResult(); pageDto.setTotal(count_number.intValue()); //分页 if (pageNo >= 0) { query.setFirstResult(pageNo * pageSize); } if (pageSize > 0) { query.setMaxResults(pageSize); } } else { count_number = BigInteger.valueOf(5); } @SuppressWarnings("unchecked") List<Essay> essays = query.getResultList(); List<EssayDto> essayDtos = new ArrayList<EssayDto>(); for (Essay essay : essays) { EssayDto essayDto = modelMapper.map(essay, EssayDto.class); int admireCount = admireDao.findByEssay(essay).size(); int evaluateCount = evaluateDao.findByEssay(essay).size(); essayDto.setAdmireCount(admireCount); essayDto.setEvaluateCount(evaluateCount); User user = essay.getUser(); essayDto.setUserId(user.getId()); essayDto.setUserName(user.getUserName()); essayDtos.add(essayDto); } pageDto.setDatas(essayDtos); pageDto.setPageCount((count_number.intValue() + pageSize -1) / pageSize); return pageDto; }
相关文章
- jQuery显示隐藏密码插件jquery.toggle-password演示
- JS框架_(JQuery.js)文章全屏动画切换
- JS框架_(JQuery.js)图片相册掀开切换效果
- JS框架_(JQuery.js)上传进度条
- A2D JS框架 - DES加密解密 与 Cookie的封装(C#与js互相加密解密)
- Json对象与Json字符串互转(4种转换方式) jquery 以及 js 的方式
- js生成二维码的jquery组件–qrcode
- jquery瀑布流布局(masonry.js)
- jquery ajax分页 js对象
- 电子签章盖章之jQuery插件jquery.zsign
- GET jquery.js net::ERR_ABORTED 403 (Forbidden)
- js(jquery)提交表单,必填内容为空,边框变红
- 前后台交互经常使用的技术汇总(后台:Java技术,前台:Js或者Jquery)
- python web py入门(56)- jQuery - HTML与JS代码分离
- jquery ajax 跨域设置
- 【JS高级】js之正则相关函数以及正则对象_02
- JavaWeb——jQuery介绍,js对象和jQuery对象的转换
- jquery分页插件pagination.js的使用