自己使用SemanticUI官网的分页组件，
但是有很多细节问题并没有解决方案，如果只是需要而分页，将页数渲染在分页组件上的话，那倒很简单，但是页面有很多的话，假如100页，那么整个tbody会随着tfoot的拉伸而变长;这里我想到的解决方案：总共只加载5个数字页，其他的页使用"…“，但是”…“的按钮不能被点击；而点击相应的页数，那么”…"的加载会有不同；那么会有三种的情况分别考虑
case1: curPage < 5 , 加载1-5 所有的页数
case2: curPage >=5 , 1、2页肯定会加载，再另外加载三页，当前页curPage始终在中间；
再仔细考虑，似乎点击的页数的不同而是否加载的"…“会有细微的区别：
当点击的是倒数第二页的时候，因为最后三页已经出现，不再拼接”…“；
当点击的是倒数第一页时，也是如此；
其它情况，最后则要拼接一个”…"
具体代码如下:
特别说明：
以下是我的表格的tfoot代码
<tfoot>
<tr>
<th colspan="6" class="mypage">
<!-- 分页 -->
<!--最大页数就是1既不显示上一页，也不显示下一页 -->
<!--<div class="ui left floated mini pagination menu" th:if="${visitorPage.totalPages}>1">
<!– <a class="icon item">
<i class="left chevron icon"></i>
</a> –>
<a class="item" th:href="@{/admin/visitorinfo(page=${visitorPage.number}-1)}" th:unless="${visitorPage.first}">上一页</a>
<a class="mini item" th:href="@{/admin/visitorinfo(page=${visitorPage.number}+1)}" th:unless="${visitorPage.last}">下一页</a>
<a class="mini item">总页数 : <span th:text="${visitorPage.totalPages}"></span> 页</a>
<a class="mini item">总条数 : <span th:text="${visitorPage.totalElements}"></span> 条</a>
<!– <a class="item">3</a>
<a class="item">4</a>
<a class="icon item"> –>
<!– <i class="right chevron icon"></i> –>
</a>
</div>-->
</th>
</tr>
</tfoot>
动态改变分页组件的函数，返回值为tfoot的html代码，最后只用拼接在上面代码的th标签里
let innerTagA = ``;
//curpage 当前页数 从0开始 ，totalPages总页数，keyword关键词 ,sort 是否排序(按照自己的需求确定参数)
function paginationFootHtml(curPage,totalPages,keyword,sort) {
let i = 1;
// console.log("totalPage==>",totalPages);
if (totalPages <=5) { //加载所有页没有省略
for ( i; i<=totalPages; i++) {
if (i === curPage) {
innerTagA+=
`<a class="item active" οnclick="queryPageByCondition('${i}','${keyword}','${sort}')">${i}</a>`;
}else {
innerTagA+=
`<a class="item" οnclick="queryPageByCondition('${i}','${keyword}','${sort}')">${i}</a>`;
}
}
}else if (totalPages > 5) {
if (curPage<5){ //当前页是<=5 那么加载1-5 页码
for (i; i <= 5; i++) {
if (i === curPage) {
innerTagA+=
`<a class="item active" οnclick="queryPageByCondition('${i}','${keyword}','${sort}')">${i}</a>`;
}else {
innerTagA+=
`<a class="item" οnclick="queryPageByCondition('${i}','${keyword}','${sort}')">${i}</a>`;
}
};
innerTagA+=`<a class="item">...</a>`;
}else if (curPage>=5){ // 当前页大于5
//始终显示 1、2页
for (i; i <=2 ; i++) {
innerTagA+=
`<a class="item" οnclick="queryPageByCondition('${i}','${keyword}','${sort}')">${i}</a>`;
}
innerTagA+=`<a class="item" >...</a>`;
//case1: 当前页数 + 1 = 总页数；当前页数在倒数第二个
if (curPage + 1 === totalPages){
for (i= curPage-1 ; i <= totalPages ; i++) {
if (curPage===i){
innerTagA+=
`<a class="item active" οnclick="queryPageByCondition('${i}','${keyword}','${sort}')">${i}</a>`;
} else {
innerTagA+=
`<a class="item" οnclick="queryPageByCondition('${i}','${keyword}','${sort}')">${i}</a>`;
}
}
//case2: 当前页数 = 总页数；当前页数在最后一个
} else if (curPage === totalPages){
for (i= curPage-2; i <=totalPages; i++) {
if (curPage===i){
innerTagA+=
`<a class="item active" οnclick="queryPageByCondition('${i}','${keyword}','${sort}')">${i}</a>`;
} else {
innerTagA+=
`<a class="item" οnclick="queryPageByCondition('${i}','${keyword}','${sort}')">${i}</a>`;
}
}
}else {
//case3: 其它情况；当前页数在中间
for (i = curPage - 1;i<=curPage+1;i++){
if (curPage===i){
innerTagA+=
`<a class="item active" οnclick="queryPageByCondition('${i}','${keyword}','${sort}')">${i}</a>`;
} else {
innerTagA+=
` <a class="item" οnclick="queryPageByCondition('${i}','${keyword}','${sort}')">${i}</a>`;
}
}
innerTagA+=`<a class="item" >...</a>`;
}
}
}
let footHtml =
`<div class="ui right floated pagination menu">
<a class="mini item preP" οnclick="queryPageByCondition('${curPage-1}','${keyword}','${sort}')">上一页</a>
${innerTagA}
<a class="mini item nextP" οnclick="queryPageByCondition('${curPage+1}','${keyword}','${sort}')">下一页</a>
</div>`;
return footHtml;
}
总结：此分页组件还不够完善，当有具体需求的时候再实现即可，欢迎讨论~~
