效果描述:
不用分页即可显示的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+'">&nbsp;&nbsp;&nbsp;'+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)的使用的更多相关文章

  1. Jquery 分页插件 Jquery Pagination

    Jquery 分页插件 Jquery Pagination 分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也 ...

  2. 分享一个Jquery 分页插件 Jquery Pagination

    分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也挺简单明了的,也助于自己写个小插件. 不过我比较懒,一般直接 ...

  3. jQuery 分页插件 jqPagination的使用

    jqPagination 是一个简单易用的轻量级 jQuery分页插件,其使用了 HTML5 和 CSS3 技术来实现.此插件提供了几个参数设置选项,通过简单的配置即可生成分页控件.此外,它的外观样式 ...

  4. 一个强大的jquery分页插件

    点击这里查看效果 这个分页插件使用方便,引用keleyidivpager.js和keleyidivpager.css文件,然后在htm(或者php,aspx,jsp等)页面中对分页总数,参数名,前缀后 ...

  5. 21个很棒的jQuery分页插件下载

    分页是指将一个大内容划分为各种不同的页面,因此网站的分页是一个很重要的部分,必须让内容有组织性和易于访问.分页有各两种不同的方式,手动跟自动.最受欢迎简单和广泛的方法是jQuery插件.下面我们收集了 ...

  6. jQuery滚动条插件 – jquery.slimscroll.js

    jquery.slimscroll.js插件是一个支持把内容放在一个盒子里面,固定一个高度,超出的则使用滚动.jquery.slimscroll.js不仅可以定义高度.宽度,还可以定义位置.滚动条大小 ...

  7. jquery分页插件的修改

    前言 最近分页功能使用的比较多,所以从网上下载个jquery分页插件来使用, 之前用的都挺好的,直到昨天出现了逻辑问题,反复查看自己的代码,最后发现是点击页码后执行了多个点击事件.最后只有自己查看源码 ...

  8. 20个jQuery分页插件和教程

    1.客户端的jQuery 分页插件jPages jPages 是一个客户端的分页插件,但提供很多特性例如自动翻页.键盘和滚动浏览,延迟显示以及完全可定制的导航面板. Read More Demo 2. ...

  9. MVC如何使用开源分页插件shenniu.pager.js

    最近比较忙,前期忙公司手机端接口项目,各种开发+调试+发布现在几乎上线无问题了:虽然公司项目忙不过在期间抽空做了两件个人觉得有意义的事情,一者使用aspnetcore开发了个人线上项目(要说线上其实只 ...

随机推荐

  1. 使struct对象拥有可变大小的数组——(C++深度探索)

    首先摘录<Inside The C++ Object Model>中的一段话: 把单一元素的数组放在一个struct的尾端,于是每个 struct objects 可以拥有可变大小的数组: ...

  2. jQuery $.extend()使用方法

    $.extend()使用方法总结. jQuery为开发插件提拱了两个方法,各自是: jQuery.fn.extend(object); jQuery.extend(object); jQuery.ex ...

  3. 【Android】20.4 录音

    分类:C#.Android.VS2015: 创建日期:2016-03-13 一.简介 利用Android提供的MediaRecorder类可直接录制音频. 1.权限要求 录制音频和视频需要下面的权限: ...

  4. error: expected expression before 'struct'

    错误原因: 使用了offsetof函数,却没有包含头文件<stddef.h> 解决办法: 包含<stddef.h>

  5. C++ function pointer and type cast

    http://www.cprogramming.com/tutorial/function-pointers.html http://www.cplusplus.com/doc/tutorial/ty ...

  6. 解决Java连接MySQL存储过程返回参数值为乱码问题

    先说MySQL的字符集问题.Windows下可通过修改my.ini内的 [mysql] default-character-set=utf8    //客户端的默认字符集 在MySQL客户端工具中输入 ...

  7. win64位操作系统下安装pl/sql developer 并登录连接到oracle12c

    1)安装Oracle 12c 64位2)安装32位的Oracle客户端( instantclient-basic-nt-12.1.0.1.0)下载instantclient-basic-nt-12.1 ...

  8. linux下调试core的命令

    在程序不寻常退出时,内核会在当前工作目录下生成一个core文件(是一个内存映像,同时加上调试信息).使用gdb来查看core文件,可以指示出导致程序出错的代码所在文件和行数. 1.core文件的生成开 ...

  9. gulp入门与一些基本设置

    这里是gulp入门的一些操作,实现了编译sass文件.压缩.合并.添加版本号等基本功能. 友情提示,如果npm出现无法下载可以安装 cnpm.在安装完Nodejs 后 npm install cnpm ...

  10. asp.net mvc 5 在没有外网win2008R2服务器部署方法

    我在本地用最新的.net 4.5和asp.net mvc 5框架做了一个小应用.本地都测试打包成功. 现在要放到服务器上,这个应用只是内网用.服务器不允许连接外网.看到www.asp.net 没有mv ...