电影网站增删改查-5 spring boots/MVC/neo4j/thymeleaf 源码分析 查询电影分页

扫码关注公众号:Java 技术驿站

发送:vip
将链接复制到本浏览器,永久解锁本站全部文章

【公众号:Java 技术驿站】 【加作者微信交流技术,拉技术群】
免费领取10G资料包与项目实战视频资料

首先 20191017100297\_1.png 熟悉webUI 下面的目录, 包括 controller 和 view , VIEW 里面的 static 静态目录包含 CSS 和JS 和图片,

templates 下面是根据模块功能划分VIEW

展示电影信息内容

     <tbody id="tbodyContent">
    </tbody>
    看不到什么, 使用js 里面填充数据:
    //初始化分页
    pageaction();
    var pg = $('.pagination');
    $('#pageSelect').live("change",function(){
        pg.trigger('setPage', [$(this).val()-1]);
    });
    //填充分页数据
    function fillData(data){
        var $list = $('#tbodyContent').empty();
        $.each(data,function(k,v){
            var html = "" ;
            html += '<tr> ' +
                    '<td>'+ (v.id==null?'':v.id) +'</td>' +
                    '<td>'+ (v.name==null?'':v.name) +'</td>' +
                    '<td>'+ (v.createDate==null?'': getSmpFormatDateByLong(v.createDate,true)) +'</td>' ;
            html += '<td><a class="c-50a73f mlr-6" href="javascript:void(0)" onclick="detail(\''+ v.id+'\')">查看</a><a class="c-50a73f mlr-6" href="javascript:void(0)" onclick="edit(\''+ v.id+'\')">修改</a><a class="c-50a73f mlr-6" href="javascript:void(0)" onclick="del(\''+ v.id+'\')">删除</a></td>' ;
            html +='</tr>' ;

            $list.append($(html));
        });
    }
    分页过程:
    //分页开始
    var currentPageData = null ;
    var pageaction = function(){
        $.get('./list?t='+new Date().getTime(),{
            name:$("#name").val()
        },function(data){
            currentPageData = data.content;
            $(".pagination").pagination(data.totalElements, getOpt());
        });
    }

    var pageselectCallback = function(page_index, jq, size){
        if(currentPageData!=null){
            fillData(currentPageData);
            currentPageData = null;
        }else  $.get('./list?t='+new Date().getTime(),{
                size:size,page:page_index,name:$("#name").val()
            },function(data){
                fillData(data.content);
            });
    }

jquery pageaction 调用controller /list

    @RequestMapping(value="/list")
    public Page<Movie> list(HttpServletRequest request) throws Exception{
        String name = request.getParameter("name");
        String page = request.getParameter("page");
        String size = request.getParameter("size");
        Pageable pageable = new PageRequest(page==null? 0: Integer.parseInt(page), size==null? 10:Integer.parseInt(size),
                new Sort(Sort.Direction.DESC, "id"));

        Filters filters = new Filters();
        if (!StringUtils.isEmpty(name)) {
            Filter filter = new Filter("name", name);
            filters.add(filter);
        }

        return pagesService.findAll(Movie.class, pageable, filters);
    }

然后, 分页过程执行

     fillData(data.content);
    填充列表数据到tbody 中
    分页过程总结 :
    分页过程-初始化-pageaction View -controller- 返回list- VIEW 
    其他分页支撑: 
    1.引用jquery pageaction  
    <script th:src="@{/scripts/pagination/jquery.pagination.js}"></script>
    2.
    //分页的参数设置:分页工具条及一些基本属性
    var getOpt = function(){
        var opt = {
            items_per_page: 10,    //每页记录数
            num_display_entries: 3, //中间显示的页数个数 默认为10
            current_page:0,    //当前页
            num_edge_entries:1, //头尾显示的页数个数 默认为0
            link_to:"javascript:void(0)",
            prev_text:"上页",
            next_text:"下页",
            load_first_page:true,
            show_total_info:true ,
            show_first_last:true,
            first_text:"首页",
            last_text:"尾页",
            hasSelect:false,
            callback: pageselectCallback //回调函数
        }
        return opt;
    }

分页结束:

    //分页结束
    var artdialog ;
    function detail(id){
        $.get("./"+id,{ts:new Date().getTime()},function(data){
            art.dialog({
                lock:true,
                opacity:0.3,
                title: "查看信息",
                width:'750px',
                height: 'auto',
                left: '50%',
                top: '50%',
                content:data,
                esc: true,
                init: function(){
                    artdialog = this;
                },
                close: function(){
                    artdialog = null;
                }
            });
        });
    }

来源:[]()

赞(0) 打赏
版权归原创作者所有,任何形式的转载请联系博主:daming_90:Java 技术驿站 » 电影网站增删改查-5 spring boots/MVC/neo4j/thymeleaf 源码分析 查询电影分页

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏