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

电影列表分页实现

最新推荐文章于 2022-12-27 02:48:54 发布

原创最新推荐文章于 2022-12-27 02:48:54 发布 · 957 阅读

1 ·

CC 4.0 BY-SA版权

programming.Java 专栏收录该内容

33 篇文章

订阅专栏

本文介绍了一个基于Web UI的电影信息展示系统中的分页功能实现细节。通过前端JavaScript与后端交互，完成电影数据的分页加载、展示，并提供查看、修改、删除等操作。

首先熟悉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;
            }
        });
    });
}