社交项目（十）

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第7天，点击查看活动详情

1.分页加载

function loadMore(isReset){
     var nextPage;
     if(isReset==true){
          nextPage = 1;
     }else{
         nextPage = $("#nextPage").val();
     }

     $.ajax({
         url: "/books",
         data: {p: nextPage},
         type: "get",
         dataType: "json",
         success: function (json) {
             var list = json.records;
             for (var  i=0;i<list.length;i++){
                 var book = list[i];
                 var html = template("tpl",book);
                 $("#bookList").append(html);
             }
             $(".stars").raty({readOnly:true})
             if(json.current<json.pages){
                 $("#btnMore").show();
                 $("#divNoMore").hide();
                 $("#nextPage").val(parseInt(json.current)+1);
             }else{
                 $("#btnMore").hide()
                 $("#divNoMore").show();
             }

         }
     })
 }
 $(function () {
    loadMore(true);
 })
 //加载更多
$(function (){
    $("#btnMore").click(function (){
        loadMore();
    })
})

代码说明:

• loadMore(isReset):对加载分页的方法进行封装，其中isReset表示是否重置页面
• isReset==true:表示要加载的是第一页
• $("#btnMore").click(function ():绑定加载更多按钮点击事件
• json.current<json.pages:判断当前是否为最后一页，如果不是，则把加载更多按钮展示，没有更多数据按钮隐藏，并且把nextPage加1

2.重启tomcat

通过网络请求可以看到，默认page是第1页，如果点击加载更多，页码会自增1，如果当前页数大于总页数，则会把加载更多的按钮隐藏，提示没有其他数据了

4.根据条件进行查找

这边需要进行分类和评分条件查找

$(".category").click(function (){
    $(".category").removeClass("highlight");
    $(".category").addClass("text-black-50");
    $(this).addClass("highlight");
    var categoryId = $(this).data("category");
    $("#categoryId").val(categoryId);
    loadMore(true);
})
$(".order").click(function (){
    $(".order").removeClass("highlight");
    $(".order").addClass("text-black-50");
    $(this).addClass("highlight");
    var order = $(this).data("order");
    $("#order").val(order);
    loadMore(true);
})

代码说明：

• $(".category").removeClass("highlight"):移除分类高亮
• $(".category").addClass("text-black-50");:置灰
• $(this).addClass("highlight");当前点击的设置成高亮
• loadMore(true);:每次点击，都进行重置

5.接口提交参数处理

$("#bookList").html("");

• 每一次重置，就把图书列表重置

6.接口处理

if(categoryId!=null && categoryId!=-1){
    queryWrapper.eq("category_id",categoryId);
}
if(order!=null){
    if(order.equals("quantity")){
        queryWrapper.orderByDesc("evaluation_quantity");
    }else if(order.equals("score")){
        queryWrapper.orderByDesc("evaluation_score");
    }
}

代码说明：

• queryWrapper.eq("category_id",categoryId);:查询条件根据分类ID传值
• queryWrapper.orderByDesc:排序

7.重启项目