SpringBoot新闻头条局部刷新和条件查询

SpringBoot新闻头条局部刷新和条件查询

接着上一篇博客

• 修改news.html中上下页按钮（通过分页按钮、ajax实现局部刷新)

  <div class="ui mini pagination menu" th:if="${page.totalPages}>1" >
                    <!-- Ajax 局部刷新-->
                    <a onclick="page(this)" th:attr="data-page=${page.number-1}" class="item" th:unless="${page.first}">上一页</a>
                    <a onclick="page(this)" th:attr="data-page=${page.number+1}" class="item" th:unless="${page.last}">下一页</a>
                </div>
  

• 在news.html中script中添加page函数、search函数、refresh_data函数

  // 搜素按钮点击事件
  $("#search-btn").click(function () {
     // 页数重置
      $("[name='page']").val(0);
      refresh_data();
  })
  
  
  function  page(obj){
        //将隐藏输入框 name 为page的值 进行设置，存储需要显示的页数，方法通过ajax传递给后台
         $("[name='page']").val($(this).data("page"));
         //向后台传递数据
         refresh_data();
      }
  
      function refresh_data(){
        //#table-container利用id名找到接收数据容器
        //load (后台处理路径，  发送数据)
        //传递搜索条件
         $("#table-container").load("/admin/news/search",{
           title: $("[name='title']").val(),
           typeId: $("[name='typeId']").val(),
           recommend: $("[name='recommend']").val(),
           page: $("[name='page']").val()
         })
      }
  

• 在controller层中newsController控制器中修改/admin/news处理方法

  // 分页全查
      @GetMapping("/news")
      public String news(@PageableDefault(size = 3) Pageable pageable, Model model) {
       
          // 不仅需要传递当前页的数据  还需要传递 所有的类别
          model.addAttribute("types", typeService.listType())