Running a widget doesn't work from a fired event of list.js

Question

I'm trying to run a widget inside an event handler.

For some reason, the widget isn't triggered inside event handler function. This event belongs to List.js, widget is paging.js.

var userList = new List('users', options);

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

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

The $('#testTable').paging({limit:5}); row does get activated when search is completed - but for some reason it doesn't run.

JSFiddle example:

http://jsfiddle.net/gxb16cen/

Any help ?

Answer 1

Calling $('#testTable').paging({limit:5}); creates the widget but doesn't update it. Normally you should call this kind of widget only once, and use methods to modify it.

In your case you could define a function that updates the widget. It would be kind of a combination of the _getNavBar() and showPage() methods. Something like this for example:

$.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;
    }
});

Then you call update on search event. Like this:

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

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