Uruchamianie widżetu nie działa z uruchomionego zdarzenia z list.js

Question

Próbuję uruchomić widget wewnątrz programu obsługi zdarzeń.

Z jakiegoś powodu widget nie jest uruchamiany w funkcji obsługi zdarzeń. To wydarzenie należy do List.js, widget to paging.js.

var userList = nowa lista ("użytkownicy", opcje);

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

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

$('#testTable').paging({limit:5}); rząd będzie aktywowany po zakończeniu wyszukiwania - ale z jakiegoś powodu nie działa.

JSFiddle przykład:

http://jsfiddle.net/gxb16cen/

Każda pomoc?

Answer 1

Wywołanie $('#testTable').paging({limit:5}); tworzy widget, ale go nie aktualizuje. Zwykle powinieneś wywoływać tego rodzaju widget tylko raz i używać metod, aby go zmodyfikować.

W twoim przypadku możesz zdefiniować funkcję, która aktualizuje widget. Byłby to rodzaj kombinacji metod. Coś takiego na przykład:

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

Następnie wywołujesz aktualizację zdarzenia wyszukiwania. Tak:

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

http://jsfiddle.net/5xjuc8d1/1/