knowledge/view/js/subCount.js

$(document).ready(function () {
    var status = 0;
    var currentPage = 1; // 定义变量，用于存储当前的页码
    var pageSize = 1; // 定义变量，用于存储当前页条数
    var totalPages = 9;
    var pageData = [
       
        {
            alias:'哈哈1',
            name:'qq哎111',
            date:'2025-03-04 05:59:59',
            status:1
        },
        {
            alias:'哈哈2',
            name:'qq哎222',
            date:'2025-03-04 05:59:59',
            status:1
        },
        {
            alias:'哈哈3',
            name:'qq哎333',
            date:'2025-03-04 05:59:59',
            status:0
        },
        {
            alias:'哈哈4',
            name:'qq哎',
            date:'2025-03-04 05:59:59',
            status:0
        },
        {
            alias:'哈哈5',
            name:'qq哎',
            date:'2025-03-04 05:59:59',
            status:1
        },
        {
            alias:'哈哈6',
            name:'qq哎',
            date:'2025-03-04 05:59:59',
            status:0
        },
        {
            alias:'哈哈7',
            name:'qq哎',
            date:'2025-03-04 05:59:59',
            status:1
        },
        {
            alias:'哈哈8',
            name:'qq哎',
            date:'2025-03-04 05:59:59',
            status:0
        },
        {
            alias:'哈哈9',
            name:'qq哎999',
            date:'2025-03-04 05:59:59',
            status:1
        },
    ]
    // 渲染分页按钮
    function renderPagination() {
        const pageNumbers = $('#page-numbers');
        pageNumbers.empty();

        // 总页数小于等于 7 时，显示所有页码
        if (totalPages <= 7) {
            for (let i = 1; i <= totalPages; i++) {
                pageNumbers.append(`<span class="${i === currentPage ? 'pagActive' : ''}">${i}</span>`);
            }
        } else {
            // 总页数大于 7 时，显示部分页码并用省略号代替
            if (currentPage <= 4) {
                // 前 5 页 + 省略号 + 最后一页
                for (let i = 1; i <= 5; i++) {
                    pageNumbers.append(`<span class="${i === currentPage ? 'pagActive' : ''}">${i}</span>`);
                }
                pageNumbers.append('<span>...</span>');
                pageNumbers.append(`<span>${totalPages}</span>`);
            } else if (currentPage >= totalPages - 3) {
                // 第一页 + 省略号 + 最后 5 页
                pageNumbers.append('<span>1</span>');
                pageNumbers.append('<span>...</span>');
                for (let i = totalPages - 4; i <= totalPages; i++) {
                    pageNumbers.append(`<span class="${i === currentPage ? 'pagActive' : ''}">${i}</span>`);
                }
            } else {
                // 第一页 + 省略号 + 当前页及前后两页 + 省略号 + 最后一页
                pageNumbers.append('<span>1</span>');
                pageNumbers.append('<span>...</span>');
                for (let i = currentPage - 2; i <= currentPage + 2; i++) {
                    pageNumbers.append(`<span class="${i === currentPage ? 'pagActive' : ''}">${i}</span>`);
                }
                pageNumbers.append('<span>...</span>');
                pageNumbers.append(`<span>${totalPages}</span>`);
            }
        }

        // 绑定页码点击事件
        pageNumbers.find('span').click(function () {
            const page = parseInt($(this).text());
            if (!isNaN(page)) {
                currentPage = page;
                getRenderData();
            }
        });

        if(totalPages>0){
            $(".pagination").removeClass('hide');
        }else{
            $(".pagination").addClass('hide');
        }
    }

    // 初始化渲染
    getRenderData();

    function getRenderData(){
        // $.ajax({
        //     type: "post",
        //     dataType: 'json',
        //     url: 'http://zhishiku.yizherenxin.cn/weibo/ajax_weibo_list',
        //     data: {
        //         status,
        //         currentPage,
        //         pageSize
        //     },
        //     success: function (res) {
        //         if(!res.status){
        //             alert(`请求失败`);
        //         }

        //         renderData(res.data)
        //     }
        // })
        var data = JSON.parse(JSON.stringify(pageData))
        renderData(data.slice(currentPage-1,currentPage+1 ))
    }
    function renderData(pageData){
        console.log(pageData,'====data');
        $('#tbody-wrap').empty()
        renderList()

        var html = '';
        pageData.forEach((item,index)=>{
            html += ` <tr data-id="${index}">
                            <td>${item.alias}</td>
                            <td>${item.name} <img class="action-icon" src="../../images/edit.svg" alt=""></td>
                            <td>
                            ${item.date}
                            </td>
                            <td>
                                <label class="switch">
                                    <input type="checkbox" ${item.status >0 ? 'checked' : ''}>
                                    <span class="slider"></span>
                                </label>
                            </td>
                        </tr>`
            $('#tbody-wrap').html(html)
        })

        renderPagination()

    }
// 当文档加载完成后执行以下函数
function renderList() {
    function createPagination(currentPage, totalPages) {
        var paginationHtml = ""; // 初始化一个字符串，用于存放分页条的HTML代码

        // 如果当前页不是第一页，则生成一个“上一页”按钮
        // if (currentPage > 1) {
        paginationHtml += "<li>&lt;</li>";
        // }

        // 始终显示第一页的页码
        paginationHtml += generatePageNumberHtml(1, currentPage);

        // 如果总页数大于1页，则继续生成分页条的其余部分
        if (totalPages > 1) {
            // 如果当前页码大于3，则在第一页和当前页之间添加省略号
            if (currentPage > 3) {
                paginationHtml += "<li>...</li>";
            }
            // 遍历当前页附近的页码，并生成对应的分页按钮
            for (
                let i = Math.max(currentPage - 2, 2); i <= Math.min(currentPage + 2, totalPages - 1); i++
            ) {
                paginationHtml += generatePageNumberHtml(i, currentPage);
            }
            // 如果当前页码小于总页数减去2，则在当前页和最后一页之间添加省略号
            if (currentPage < totalPages - 2) {
                paginationHtml += "<li>...</li>";
            }
        }

        // 始终显示最后一页的页码
        paginationHtml += generatePageNumberHtml(totalPages, currentPage);

        // 如果当前页不是最后一页，则生成一个“下一页”按钮
        if (currentPage < totalPages) {
            paginationHtml += "<li>&gt;</li>";
        }

        // 返回生成的分页条HTML字符串
        return paginationHtml;
    }
    // 创建分页条的函数

    // 生成单个页码按钮的HTML的函数
    function generatePageNumberHtml(pageNumber, currentPage) {
        // 返回一个格式化后的HTML字符串，包含激活状态的判断
        return (
            '<li class="' +
            (pageNumber === currentPage ? "pagActive" : "") +
            '">' +
            pageNumber +
            "</li>"
        );
    }

    // 选择页码的函数
    function selectPage(pageNumber) {
        // 更新当前页码的变量，并重新生成分页条
        currentPage = pageNumber;
        $("#pagination").html(createPagination(currentPage, totalPages));
    }

    // 为分页条上的每个按钮绑定点击事件
    $("#pagination").on("click", "li", function (event) {
        let pageNumber = $(this).text(); // 获取点击的页码或按钮文本

        // 如果点击的是省略号，则不执行任何操作
        if (pageNumber === "...") {
            event.preventDefault();
            return;
        }

        // 根据点击的按钮，调用selectPage函数更新当前页码
        if (pageNumber === "<") {
            if (currentPage < 2) {
                return
            }
            selectPage(currentPage - 1);
        } else if (pageNumber === ">") {
            // if(currentPage <2){
            //     return
            // }
            selectPage(currentPage + 1);
        } else {
            selectPage(parseInt(pageNumber));
        }
    });

    // 初始化分页条，总页数为20，默认显示第一页
    $("#pagination").html(createPagination(currentPage, totalPages));
}
    // 上一页
    $('#prev-page').click(function () {
        if (currentPage > 1) {
            currentPage--;
            getRenderData();
        }
    });

    // 下一页
    $('#next-page').click(function () {
        if (currentPage < totalPages) {
            currentPage++;
            getRenderData();
        }
    });

    // 跳转到指定页
    $('#go-to-page').click(function () {
        const page = parseInt($('#jump-to-page').val());
        if (page >= 1 && page <= totalPages) {
            currentPage = page;
            getRenderData();
        } else {
            alert(`请输入有效的页码（1-${totalPages}）`);
        }
    });

    let currentRow = null;

      // 显示操作图标
      $('tr').hover(
        function () {
          $(this).find('.action-icon').show();
        },
        function () {
          $(this).find('.action-icon').hide();
        }
      );

      // 点击编辑图标
      $('#tbody-wrap').on('click','.action-icon',function () {
        const row = $(this).closest('tr');
        currentRow = row;
        const cell = row.find('td').eq(1); // 编辑第2列数据
        const currentValue = cell.text();
        console.log($('#editPopover').width(),'-----offset');
        $('#editInput').val(currentValue);
        $('#editPopover').css({
          top: row.offset().top - $('#editPopover').height() - row.height(),
          left: cell.offset().left - Math.ceil($('#editPopover').width() /2)
        }).show();
      });

      // 确认修改
      $('#confirmBtn').click(function () {
        const newValue = $('#editInput').val();
        if (newValue && currentRow) {
          currentRow.find('td').eq(0).text(newValue);
          $('#editPopover').hide();
        }
      });

      // 取消修改
      $('#cancelBtn').click(function () {
        $('#editPopover').hide();
      });

      // Switch 开关切换
      $('.switch input').change(function () {
        const row = $(this).closest('tr');
        const isChecked = $(this).is(':checked');
        const status = isChecked ? 'Active' : 'Inactive';
        row.find('td').eq(2).text(status); // 更新状态列
      });

      $('.addNewBtn').click(function () {
        $('.addChildNumWrap, .modal-overlay').fadeIn();
        // setTimeout(()=>{
        //     $('.addChildNumWrap, .modal-overlay').fadeOut();
        // },3000)
    });
    $('.cancelBtn').click(function(){
        $('.addChildNumWrap, .modal-overlay').fadeOut();
    })
    $('.confirmBtn').click(function(){
        $('.addChildNumWrap, .modal-overlay').fadeOut();
    })
})