切换分页显示条数时，分页控件重复追加问题

问题出在每次切换选项生成新分页时，没有清除旧的分页内容，直接用append追加导致新旧分页项叠加。

修复方案 #

在生成新分页项之前，先清空.pagination容器内的所有旧内容，再重新渲染全新的分页结构。

修改后的Script.js代码：

$('select').on('change', function(){
    var limit= $(this).val();
    displayPagination(limit)
});

function displayPagination(limit) {
    var limitPerPage = limit;
    
    //more codes here

    // 清空原有分页内容，避免新旧项叠加
    $(".pagination").empty();

    //pagination
    $(".pagination").append("<li class='current-page active'><a class='page-link' href='javascript:void(0)'>" + 1 + "</a></li>");

    for (var i = 2; i <= totalPages; i++) {
      $(".pagination").append("<li class='current-page'><a class='page-link' href='javascript:void(0)'>" + i + "</a></li>"); // Insert page number into pagination tabs
    }

    $(".pagination").append("<li class='page-item' id='next-page'><a class='page-link'   href='javascript:void(0)' aria-label=Next><span aria-hidden=true>&raquo;</span></a></li>");

    //more codes
}

关键说明 #

$(".pagination").empty()会移除容器内所有子元素，确保每次生成的分页都是全新结构，彻底解决旧项残留导致的重复追加问题，其他分页逻辑保持不变即可。

内容的提问来源于stack exchange，提问作者Dhenhice