运行窗口小部件不适用于list.js的已触发事件

Question

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

由于某种原因,在事件处理函数内部不触发窗口小部件.此事件属于List.js,小部件属于paging.js.

var userList = new List('users',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/