jQuery分頁插件(jquery.page.js)的使用

效果描述：

不用分頁即可顯示的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;
    }