Javascript 运行小部件不会'；无法从list.js的已激发事件中工作

我正在尝试在事件处理程序中运行一个小部件

由于某些原因，小部件不会在事件处理程序函数内触发。 此事件属于List.js，小部件为paging.js

var userList=新列表（“用户”，选项）

$（'#testTable'）。分页（{limit:5}）行在搜索完成时会被激活-但由于某些原因它不会运行

JSFIDLE示例：


有什么帮助吗？
调用
$（'#testTable'）。分页（{limit:5}）创建小部件，但不更新它。通常，您应该只调用此类小部件一次，并使用方法对其进行修改

在您的例子中，您可以定义一个更新小部件的函数。它将是
\u getNavBar（）
和
showPage（）
方法的组合。比如说：

$.widget('zpd.paging', $.zpd.paging, {//this is to add a method to the widget,
                                      // but the method could also be defined in the widget itself
    updatePaging: function () {
        var num = 0;
        var limit = this.options.limit;
        var rows = $('.list tr').show().toArray();
        var nav = $('.paging-nav');
        nav.empty();//you empty your navbar then rebuild it
        for (var i = 0; i < Math.ceil(rows.length / this.options.limit); i++) {
            this._on($('<a>', {
                href: '#',
                text: (i + 1),
                    "data-page": (i)
            }).appendTo(nav), {
                click: "pageClickHandler"
            });
        }
        //create previous link
        this._on($('<a>', {
            href: '#',
            text: '<<',
                "data-direction": -1
        }).prependTo(nav), {
            click: "pageStepHandler"
        });
        //create next link
        this._on($('<a>', {
            href: '#',
            text: '>>',
                "data-direction": +1
        }).appendTo(nav), {
            click: "pageStepHandler"
        });
        //following is basically showPage, so the display is made according to the search
        for (var i = 0; i < rows.length; i++) {
            if (i >= limit * num && i < limit * (num + 1)) {
                $(rows[i]).css('display', this.options.rowDisplayStyle);
            } else {
                $(rows[i]).css('display', 'none');
            }
        }
        return nav;
    }
});

我得到了
$。zpd未定义
@Sadikhasan我编辑了链接，库被移动了
$.widget('zpd.paging', $.zpd.paging, {//this is to add a method to the widget,
                                      // but the method could also be defined in the widget itself
    updatePaging: function () {
        var num = 0;
        var limit = this.options.limit;
        var rows = $('.list tr').show().toArray();
        var nav = $('.paging-nav');
        nav.empty();//you empty your navbar then rebuild it
        for (var i = 0; i < Math.ceil(rows.length / this.options.limit); i++) {
            this._on($('<a>', {
                href: '#',
                text: (i + 1),
                    "data-page": (i)
            }).appendTo(nav), {
                click: "pageClickHandler"
            });
        }
        //create previous link
        this._on($('<a>', {
            href: '#',
            text: '<<',
                "data-direction": -1
        }).prependTo(nav), {
            click: "pageStepHandler"
        });
        //create next link
        this._on($('<a>', {
            href: '#',
            text: '>>',
                "data-direction": +1
        }).appendTo(nav), {
            click: "pageStepHandler"
        });
        //following is basically showPage, so the display is made according to the search
        for (var i = 0; i < rows.length; i++) {
            if (i >= limit * num && i < limit * (num + 1)) {
                $(rows[i]).css('display', this.options.rowDisplayStyle);
            } else {
                $(rows[i]).css('display', 'none');
            }
        }
        return nav;
    }
});

userList.on('searchComplete', function () {
    $('#testTable').paging('updatePaging');
});