Javaweb使用thymeleaf局部刷新结合Layui插件实现Html分页

< html lang = "zh-cn" xmlns:th = "http://HdhCmsTestthymeleaf.org" xmlns:shiro = "http://HdhCmsTestthymeleaf.org/thymeleaf-extras-shiro" >

...

< table class = "table table-hover text-center" id = "refreshList" th:fragment = "refreshList" >

   < tr >

     < th width = "100" style = "text-align:left; padding-left:20px;" >ID</ th >

     < th width = "10%" >景点名称</ th >

     < th width = "10%" >图片</ th >

     < th >景点类型</ th >

     < th >门票价格</ th >

     < th >景点负责人</ th >

     < th width = "10%" >创建时间</ th >

     < th width = "20%" >操作</ th >

   </ tr >

   < tr th:each = "view : ${viewList}" >

     < td style = "text-align:left; padding-left:20px;" >< input type = "checkbox" name = "id" value = "" /></ td >

     < td th:text = "${view.viewTitle}" ></ td >

     < td >< img th:src = "${'/upload/img/'+view.pictureUrl}"   alt = "" width = "100" height = "70" /></ td >

     < td th:switch = "${view.type}" >

       < span th:case = "1" >收费</ span >

       < span th:case = "2" >免费</ span >

     </ td >

     < td th:text = "${view.price == null or view.price == '' ? '暂无' : view.price}" ></ td >

     < td th:text = "${view.manager}" ></ td >

     < td th:text = "${#dates.format(view.createTime,'yyyy-MM-dd HH:mm:ss')}" ></ td >

     < td >< div class = "button-group" > < a class = "button border-main" th:href = "${'/view/edit.do?viewId='+view.id}" rel = "external nofollow" >< span class = "icon-edit" ></ span > 修改</ a > < a class = "button border-red" href = "javascript:void(0)" rel = "external nofollow"   th:onclick = "del([[${view.id}]])" >< span class = "icon-trash-o" ></ span > 删除</ a > </ div ></ td > 

   </ tr >

</ table >

<script src= "/js/jquery.js" ></script>

<script type= "text/javascript" src= "/layui/layui.js" ></script>

<script type= "text/javascript" src= "/layui/layui.all.js" ></script>

...

//分页

layui.use( 'laypage' , function () {

     var laypage = layui.laypage;

     var total = 0;

     var limit = 6;

     //获取列表总数量

     $.ajax({

         url: '/view/count.do' ,

         type: 'POST' ,

         dataType: 'json' ,

         async: false ,

         success: function (data) {

             if (data != null ){

                 total = data;

             }

         }

     });

     //执行一个laypage实例

     laypage.render({

         elem: 'pageDiv' , //注意，这里的 pageDiv 是 ID，不用加 # 号

         count: total, //数据总数，从服务端得到

         limit: limit, //页面展示数据条数

         theme: '33ccff' , //主题样式

         jump: function (obj, first) {

             if (!first) {

                 $.ajax({

                     url: '/view/list.do' ,

                     type: 'POST' ,

                     data: { 'pageSize' : obj.limit, 'pageIndex' : obj.curr},

                     success: function (data) {

                         if (data != null ) {

                             $( "#refreshList" ).html(data);

                         }

                     }

                 });

             }

         }

     });

});

@PostMapping ( "/list.do" )

public String getList(PageBean pageBean, Model model){

   if (Objects.isNull(pageBean)) pageBean = new PageBean();

   pageBean.setPageIndex((pageBean.getPageIndex()- 1 )*pageBean.getPageSize());

   List<View> viewList = viewService.getList(pageBean);

   model.addAttribute( "viewList" ,viewList);

   //viewList是html页面名称，refreshList是html页面内定义的元素名称，在html页面内可以看到

   return "viewList::refreshList" ;

}

th:fragment= "refreshList"