JQuery分页onPageClick事件持续运行

JQuery pagination onPageClick event continuously running

本文关键字：运行 事件 分页 onPageClick JQuery      更新时间：2023-09-26

假设我有一个ID为"pagination-demo"的div，totalPage设置为5。以下是我如何初始化它：

function InitializePagination(totalPage) {
    opts = {
        totalPages: totalPage,
        visiblePages: 5,
        onPageClick: function (event, page) {
            request();
        }
    };
    $('#pagination-demo').twbsPagination(opts);
}

ajax请求是：

function request() {
    $.ajax({
        url: "webservice.asmx/CaseStudiesList",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        success: function (r) {
            ('#pagination-demo').twbsPagination('destroy');
            $('#pagination-demo').twbsPagination($.extend(opts, {
                totalPages: 10
            }));
        }
    });
}

正确的结果是将JQuery分页插件的totalPages设置从5更改为10。

现在，每当我点击不同的页面（从而调用onPageClick函数）时，request函数都会被连续调用。为什么以及如何才能强制只调用一次？

在这里我可以看到回调中的page参数：

onPageClick: function (event, page) {
    if(page === this.totalpages){
        request();
    }
}

从文档中：

可用事件：
onPageClick:回调函数
功能参数>
事件：对象
page：的页数

$.fn.twbsPagination.defaults = {
        totalPages: 1,
        startPage: 1,
        visiblePages: 5,
        initiateStartPageClick: false,
        hideOnlyOnePage: false,
        href: false,
        pageVariable: '{{page}}',
        totalPagesVariable: '{{total_pages}}',
        page: null,
        /*first: 'First',*/
        prev: '<i class="icon-im-arrow-left"></i>',
        next: '<i class="icon-im-arrow-right"></i>',
        
        loop: false,
        onPageClick: null
 };

此处initiateStartPageClick:false，initiaateStartPageClick需要为false才能停止连续调用请求函数。

相关文章：