使用JS手动实现SementicUI的分页，解决页数过多的问题.

自己使用SemanticUI官网的分页组件，只有很简单的功能如下

但是有很多细节问题并没有解决方案，如果只是需要而分页，将页数渲染在分页组件上的话，那倒很简单，但是页面有很多的话，假如100页，那么整个tbody会随着tfoot的拉伸而变长;这里我想到的解决方案：总共只加载5个数字页，其他的页使用"…“，但是”…“的按钮不能被点击；而点击相应的页数，那么”…"的加载会有不同；那么会有三种的情况分别考虑
case1: curPage < 5 , 加载1-5 所有的页数

case2: curPage >=5 , 1、2页肯定会加载，再另外加载三页，当前页curPage始终在中间；

再仔细考虑，似乎点击的页数的不同而是否加载的"…“会有细微的区别：
当点击的是倒数第二页的时候，因为最后三页已经出现，不再拼接”…“；
当点击的是倒数第一页时，也是如此；
其它情况，最后则要拼接一个”…"

具体代码如下:
特别说明：
以下是我的表格的tfoot代码

 <tfoot>
                <tr>

                    <th colspan="6" class="mypage">
                        
                        
                        
                    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+=
                        `${i}','${keyword}','${sort}')">${i}`;

                }else {
                    innerTagA+=
                        `${i}','${keyword}','${sort}')">${i}`;

                }

            }


        }else if (totalPages > 5) {

            if (curPage<5){ //当前页是<=5 那么加载1-5 页码

                for (i; i <= 5; i++) {
                    if (i === curPage) {
                        innerTagA+=
                            `${i}','${keyword}','${sort}')">${i}`;

                    }else {
                        innerTagA+=
                            `${i}','${keyword}','${sort}')">${i}`;

                    }
                };
                innerTagA+=`...`;



            }else if (curPage>=5){  // 当前页大于5
                //始终显示 1、2页
                for (i; i <=2 ; i++) {
                    innerTagA+=
                        `${i}','${keyword}','${sort}')">${i}`;
                }
                innerTagA+=`...`;

                //case1: 当前页数 + 1 = 总页数；当前页数在倒数第二个
                if (curPage + 1  === totalPages){

                    for (i= curPage-1 ; i <= totalPages ; i++) {

                        if (curPage===i){
                            innerTagA+=
                            `${i}','${keyword}','${sort}')">${i}`;
                        } else {
                            innerTagA+=
                            `${i}','${keyword}','${sort}')">${i}`;
                        }


                    }


                //case2:  当前页数  = 总页数；当前页数在最后一个
                } else if (curPage === totalPages){

                    for (i= curPage-2; i <=totalPages; i++) {

                        if (curPage===i){
                            innerTagA+=
                            `${i}','${keyword}','${sort}')">${i}`;
                        } else {
                            innerTagA+=
                            `${i}','${keyword}','${sort}')">${i}`;
                        }
                    }



                }else {
                    //case3: 其它情况；当前页数在中间
                    for (i = curPage - 1;i<=curPage+1;i++){
                        if (curPage===i){
                            innerTagA+=
                                `${i}','${keyword}','${sort}')">${i}`;
                        } else {
                            innerTagA+=
                                ` ${i}','${keyword}','${sort}')">${i}`;
                        }
                    }
                    innerTagA+=`...`;

                }



            }

        }
            let footHtml =
                `

                            ${curPage-1}','${keyword}','${sort}')">上一页
                            ${innerTagA}
                            ${curPage+1}','${keyword}','${sort}')">下一页
                        `;

        return footHtml;
    }

总结：此分页组件还不够完善，当有具体需求的时候再实现即可，欢迎讨论~~