javascript - 从 list.js 的触发事件运行小部件不起作用

Question

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

出于某种原因，小部件不会在事件处理程序函数内触发。 这个事件是List.js的，widget是paging.js的。

var userList = new List('用户', options);

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

$('#testTable').paging({limit:5});

$('#testTable').paging({limit:5}); 行在搜索完成后会被激活 - 但由于某种原因它不会运行。

JSFiddle 示例:

http://jsfiddle.net/gxb16cen/

有什么帮助吗？

Answer 1

调用 $('#testTable').paging({limit:5}); 创建小部件但不更新它。通常你应该只调用一次这种小部件，并使用方法来修改它。

在您的情况下，您可以定义一个更新小部件的函数。它是 _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;
    }
});

然后调用搜索事件的更新。像这样:

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

https://jsfiddle.net/5xjuc8d1/27/