JS 分页与 twbspagination 插件和 AJAX 在第三个 onPageClick 事件后更新

Question

首先，我想说我是 jQuery 的新手，所以我的问题可能很愚蠢或类似的问题。我想将这个 jQuery 插件用于 AJAX 分页：http://esimakin.github.io/twbs-pagination/ 并且我是这样实现的：

$(document).ready(function () {
var params = window.location.pathname.split('/').slice(1);
if (params[2] == null) {
    params[2] = 10;
}
countPages('http://losuj-mirka.byethost7.com/countPages/', params[2])
    .done(function (data) {
        $('ul.pagination').empty();
        $('ul.pagination').twbsPagination({
            totalPages: data.pagesAmount,
            visiblePages: 5,
            onPageClick: function (event, page) {
                console.log(page);
                if (params[1] == 0 || params[1] == null) {
                    params[1] = 1;
                }
                else {
                    params[1] = page;
                }
                useAjax('http://losuj-mirka.byethost7.com/archives/ajaxArchives/', params)
                    .done(function (data) {
                        $('#archives-table tbody').html(data.result);
                    })
            }
        });
    });

});

function countPages(url, limit) {
return $.ajax({
    url: url + limit,
    data: {
        format: 'json'
    },
    dataType: 'json',
    type: 'GET'
})
    .fail(function () {
        console.log('AJAX error.')
    });

}

function useAjax(url, params) {
return $.ajax({
    url: url + params[1] + '/' + params[2],
    data: {
        format: 'json'
    },
    dataType: 'json',
    type: 'GET'
})
    .fail(function () {
        console.log('AJAX error.')
    });

}

但是该代码在第三次 onPageClick 事件之后替换了我的 table 你可以在这里查看：http://losuj-mirka.byethost7.com/archives/ 是因为我的错误实施吗？

Answer 1

当你运行这一行

var params = window.location.pathname.split('/').slice(1);

你得到 ["archives", ""] 作为 param 的值。所以 param[1] 的值为 "".

这就是为什么当这个条件第一个运行时，它 returns false。

if (params[1] == 0 || params[1] == null) {
    params[1] = 1;
}

您可以尝试将该条件更新为：

if (params[1] == 0 || params[1] == null || params[1] == "") {
    params[1] = 1;
}

这可能会解决您的问题。我不能完全确定，因为我不能在 jsfiddle 或其他东西中尝试它。

JS 分页与 twbspagination 插件和 AJAX 在第三个 onPageClick 事件后更新

JS pagination with twbspagination plugin and AJAX update after third onPageClick event

javascript

ajax

jquery

pagination