jQuery分页插件(jquery.page.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.page.js)的使用的更多相关文章
- Jquery 分页插件 Jquery Pagination
Jquery 分页插件 Jquery Pagination 分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也 ...
- 分享一个Jquery 分页插件 Jquery Pagination
分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也挺简单明了的,也助于自己写个小插件. 不过我比较懒,一般直接 ...
- jQuery 分页插件 jqPagination的使用
jqPagination 是一个简单易用的轻量级 jQuery分页插件,其使用了 HTML5 和 CSS3 技术来实现.此插件提供了几个参数设置选项,通过简单的配置即可生成分页控件.此外,它的外观样式 ...
- 一个强大的jquery分页插件
点击这里查看效果 这个分页插件使用方便,引用keleyidivpager.js和keleyidivpager.css文件,然后在htm(或者php,aspx,jsp等)页面中对分页总数,参数名,前缀后 ...
- 21个很棒的jQuery分页插件下载
分页是指将一个大内容划分为各种不同的页面,因此网站的分页是一个很重要的部分,必须让内容有组织性和易于访问.分页有各两种不同的方式,手动跟自动.最受欢迎简单和广泛的方法是jQuery插件.下面我们收集了 ...
- jQuery滚动条插件 – jquery.slimscroll.js
jquery.slimscroll.js插件是一个支持把内容放在一个盒子里面,固定一个高度,超出的则使用滚动.jquery.slimscroll.js不仅可以定义高度.宽度,还可以定义位置.滚动条大小 ...
- jquery分页插件的修改
前言 最近分页功能使用的比较多,所以从网上下载个jquery分页插件来使用, 之前用的都挺好的,直到昨天出现了逻辑问题,反复查看自己的代码,最后发现是点击页码后执行了多个点击事件.最后只有自己查看源码 ...
- 20个jQuery分页插件和教程
1.客户端的jQuery 分页插件jPages jPages 是一个客户端的分页插件,但提供很多特性例如自动翻页.键盘和滚动浏览,延迟显示以及完全可定制的导航面板. Read More Demo 2. ...
- MVC如何使用开源分页插件shenniu.pager.js
最近比较忙,前期忙公司手机端接口项目,各种开发+调试+发布现在几乎上线无问题了:虽然公司项目忙不过在期间抽空做了两件个人觉得有意义的事情,一者使用aspnetcore开发了个人线上项目(要说线上其实只 ...
随机推荐
- CentOS 7 设置中文环境
在vultr上的虚拟机虽然安装了中文支持,但是默认显示英语. 只要修改 /etc/locale.conf 即可. LANG="zh_CN.UTF-8" LANGUAGE=" ...
- 易懂的modelsim学习笔记
1. 建一个总文件夹,如cnt2. 为源代码,测试台文件,仿真各建一文件夹.如src,tb,sim3. 编写源代码,testbench.如cnt.v,tb_cnt.v文件,同时文件名里的模块名与文件名 ...
- windows performance
blogs.technet.com/b/perfguide/archive/2010/09/28/the-microsoft-pfe-performance-guide-start-here.aspx
- Linux,Windows中的相对路径、绝对路径
1.Windows绝对路径:以盘符开始 如C:/a.txt相对路径:. 指的是当前目录.. 指的是挡圈目录的上一级目录./test表示当前目录下的test文件夹/test表示当前盘符下的test文件夹 ...
- posix多线程--互斥量
多线程程序在线程间共享数据时,如果多个线程同时访问共享数据就可能有问题.互斥量是解决多个线程间共享数据的方法之一. 1.互斥量初始化两种方式:(1)静态初始化 #include <pthread ...
- linux命令(29):用户组管理
用户管理: 新建用户或组:新建用户:adduser user //新建user用户(推荐)passwd user //给user用户设置密码 新建组:groupadd test //新建test工作组 ...
- hdoj1160 FatMouse's Speed 动态规划
FatMouse's Speed Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- How to Enable EPEL Repository for RHEL/CentOS 7.x/6.x/5.x
What is EPEL EPEL (Extra Packages for Enterprise Linux) is open source and free community based repo ...
- vue的面包屑导航组件
用来将其放到navbar中: Breadcrumb/index.vue <template> <el-breadcrumb class="app-breadcrumb&qu ...
- js获取相同name文本框的value
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> < ...