分页数据渲染

最新推荐文章于 2024-06-17 15:13:54 发布

一个风轻云淡

最新推荐文章于 2024-06-17 15:13:54 发布

阅读量1.8k

点赞数 2

分类专栏：谷粒尚城文章标签： java 开发语言

本文链接：https://blog.csdn.net/m0_62436868/article/details/128827057

版权

谷粒尚城专栏收录该内容

50 篇文章 4 订阅

订阅专栏

文章介绍了如何在SearchResult类中添加pageNavs属性来生成分页效果。通过Thymeleaf模板引擎，显示上一页、下一页链接以及页码列表，并使用JavaScript处理点击事件，动态更新页面URL以实现页面切换。此外，还提供了replaceParamVal函数来处理URL参数的替换。

摘要由CSDN通过智能技术生成

SearchResult属性增加

增加属性 private  List<Integer> pageNavs;
目的：产生分页效果，方便操作，navs记录了从1到总页数的暑假

不是第一页时显示上一页

<a class="page_a" th:attr="pn=${result.pageNum - 1}" href="/static/search/#"
   th:if="${result.pageNum>1}">
    < 上一页
</a>
th:attr="pn=${result.pageNum - 1}"：将当前页码-1给pn赋值

th:if="${result.pageNum>1}"：如果当前页面大于1才显示上一页

页数遍历切换

<a class="page_a"
   th:attr="pn=${navs},style=${navs == result.pageNum?'border: 0;color:#ee2222;background: #fff':''}"
   th:each="navs : ${result.pageNavs}">[[${nav}]]</a>

</a>

将各个页码遍历显示，并将当前页码绑定至属性pn

下一页数据拼接

<a class="page_a" th:attr="pn=${result.pageNum + 1}"
   th:if="${result.pageNum<result.totalPages}">
    下一页 >

不是最后一页时显示下一页

总共页码

  <span class="page_span2">
 <em>共<b>[[${result.totalPages}]]</b>页&nbsp;&nbsp;到第</em>
 <input type="number" value="1">
<em>页</em>
  <a class="page_submit">确定</a>
 </span>

拼接函数

    $(".page_a").click(function () {
        var pn = $(this).attr("pn");
        var href = location.href;
        if (href.indexOf("pageNum") != -1) {
            //替换pageNum
            location.href = replaceParamVal(href, "pageNum", pn);
        } else {
            location.href = location.href + "&pageNum=" + pn;
        }
        return false;
    })

替换函数

function replaceParamVal(url, paramName, replaceVal,forceAdd) {
var oUrl = url.toString();
var nUrl;
if (oUrl.indexOf(paramName) != -1) {
if( forceAdd ) {
if (oUrl.indexOf("?") != -1) {
nUrl = oUrl + "&" + paramName + "=" + replaceVal;
} else {
nUrl = oUrl + "?" + paramName + "=" + replaceVal;
}
} else {
var re = eval('/(' + paramName + '=)([^&]*)/gi');
nUrl = oUrl.replace(re, paramName + '=' + replaceVal);
}
} else {
if (oUrl.indexOf("?") != -1) {
nUrl = oUrl + "&" + paramName + "=" + replaceVal;
} else {
nUrl = oUrl + "?" + paramName + "=" + replaceVal;
}
}
return nUrl;
};