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())
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值