使用Ajax

Question

我正在构建一个使用Ajax加载的表和分页导航。 表格中的所有内容（包括排序和过滤）都可以正常工作，但点击第2页后的活动样式选择除外。

这是导航：

<nav id="UsersTableNavigation">
    <div id="navButtons"></div>
    <ul id='totalResultsUL'
        class='pagination justify-content-center small' style='color: gray;'></ul>
</nav>

Ajax电话：

$
.ajax({
    type : "GET",
    url : ".......",
    datatype : 'json',
    dataContent : 'application/json',
    data : dataRequestObject,
    success : function(result) {

        $('#errorNoDataOnTable').hide();
        $('#usersTable tbody').empty();

        if (!result)
            console.log("resultado null");

        totalFiltered = result.totalElements;
        totalPages = result.totalPages;
        limit = result.numberOfElements;
        $.each(
                result.content,
                function(index, user) {

                    // table content code here

                });

        $('#UsersTableNavigation #navButtons').empty();
        $('#UsersTableNavigation #totalResultsUL')
                .text("( "
                       + result.totalElements
                       + " Results");
        if (result.totalPages > 1)
            createPaginatioDiv(result.totalPages,
                    result.totalElements);

    },
    error : function(e) {
        $('#usersTable').empty();
        $('#errorNoDataOnTable').show();
        console.log("ERROR: ", e);
    }
});
}

分页功能的创建导航：

function createPaginatioDiv(numPagesToShow, totalElements) {

    var navPart = "<ul id='paginationsUL' class='pagination justify-content-center'>"
            + "<li id='previousPagination' class='page-item disabled'><a class='page-link' href='#' "
                    +"tabindex='-1'>Previous</a></li>";
    for (var i = 1; i <= numPagesToShow; i++)
        navPart += "<li id 'paginationLI' class='page-item'><a id='paginationA' class='page-link' href='#' data-page='"+i+"' >"
                + i + "</a></li>";

    navPart += "<li id='nextPagination' class='page-item'><a  class='page-link' href='#' >Next</a></li></ul>";

    $('#UsersTableNavigation #navButtons').append(navPart);
    $('a[data-page="1"]').parent().addClass('active'); 
}

这 - ＆gt; $('a[data-page="1"]').parent().addClass('active');正常工作，因为它是第一次加载...'active'已实现。 在我按任何其他页面后，我无法使addClass工作，因为我没有刷新页面...

这是“准备就绪文件”部分：

$(document).on(
"click",'#UsersTableNavigation #navButtons ul li a',
function(e) {

if(!isNaN($(this).text())){
    pageToGo = $(this).text();
} 

if ($(this).parent().attr('id') == 'nextPagination') {
    pageToGo++;
}
if ($(this).parent().attr('id') == 'previousPagination') {
    pageToGo--;
}

if (pageToGo > 1 && pageToGo < totalFiltered) {
    $('#previousPagination')
        .removeClass('disabled');
    $('#nextPagination')
        .removeClass('disabled');
}
if (pageToGo == totalFiltered) {
    $('#nextPagination').addClass(
        'disabled');
    $('#previousPagination')
        .removeClass('disabled');
}
if (pageToGo == 1) {
    $('#previousPagination')
        .addClass('disabled');
    $('#nextPagination')
        .removeClass('disabled');
}


$('a[data-page='+pageToGo+']').parent().addClass('active'); 
//get data using ajax

我看到了一些对这种情况的引用，但没有一个解决了我最有可能成为newb的问题。

最奇怪的是，如果我在控制台上运行$('a[data-page='+pageToGo+']').parent().addClass('active');作为$('a[data-page='3']').parent().addClass('active');（例如），则项目会根据需要变为活动状态...

任何想法我该如何解决这个问题？ 谢谢你的时间，

Eunito。