zoukankan      html  css  js  c++  java
  • 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;
        }
  • 相关阅读:
    要求两个条件都为假时,执行某些操作
    Celery + RabbitMq 示意图
    关于消息队列的好文章
    django related_name, on_delete
    Celery 图,[转]
    django model 中 meta子类详解
    django 自定义app
    python __dict__
    Python SQLAlchemy基本操作和常用技巧(包含大量实例,非常好)【转】
    scala private
  • 原文地址:https://www.cnblogs.com/007sx/p/5709323.html
Copyright © 2011-2022 走看看