jquery局部加载数据和分页

使用jquery的load方法局部刷新数据

<script th:inline="javascript">
//thymeleaf中获取应用路径
var contextPath = [[${#request.getContextPath()}]]
</script>
//这个不需要点击直接加载第一页的值，和后边的加入了onclick的形成对比
//function方法直接加载 两个框中的数据第一页
<script type="text/javascript">
    $(function(){
    $("#selected").load(contextPath + "/home/getBookDate",buildQuery(1,1));
    $("#recommend").load(contextPath + "/home/getBookDate",buildQuery(1,2));
}
//包装查询参数 进行响应的判断
//第二个参数代表那个框
function buildQuery(page,category){
    var query={};
    query.page = typeof page == "undefined"? 1 : page;
    query.category = category;
    return query;
}
)

2.获取图书信息

@Controller
@RequestMapping("/home")
public class BookController{
@Autowired
private BookService bookService

@RequestMapping("/getBookData")
public String getBookData(Model model,Integer category){
QueryWrapper<Book> queryWrapper = new QueryWrapper<>();
queryWrapper.eq("category",category);
Ipage<Book> iPage = bookService.page(new Page<>(page,4),queryWrqpper);

model.addAttribute("bookList",iPage.getRecords());
model.addAttribute("pre",iPage.getCurrent()-1);//上一页的页码
model.addAttribute("next",iPage.getCurrent()+1);//下一页的页码
model.addAttribute("cur",iPage.getCurrent());
model.addAttribute("last",iPage.getPages());
model.addAttribute("category",category);
return "bookData";
}}

3分页功能

<li th:classappend="${cur == 1} ? 'disabled' : ''">
    <a th:style="${cur == 1}? 'pointer-events:none' : ''"href="javascript:void(0)" th:onclick="|loadData(${pre},${category})|">上一页</a>
</li>
<li th:classappend="${cur == last} ? 'disabled' : ''">
    <a th:style="${cur== last} ? 'pointer-events:none' : ''href="javascript:void(0)" th:onclick="|loadData(${next},${category})|">下一页</a>
</li>




<script type="text/javascript">
function loadData(page,category){
    var node;
if(category == 1)
{node = "selected";}
else if(category == 2)
{node = "recommend";}
else{node ="bargain"}
    $("#"+ node).load(contextPath+"/home/getBookData",buildQuery(page,category));

}
//包装查询参数 进行响应的判断
//第二个参数代表那个框
function buildQuery(page,category){
    var query={};
    query.page = typeof page == "undefined"? 1 : page;
    query.category = category;
    return query;
}
</script>