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

@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;
}
        });
});
}