list.jsの起動イベントからウィジェットを実行できない

Question

イベントハンドラ内でウィジェットを実行しようとしています。何らかの理由で

は、ウィジェットがイベントハンドラ関数内でトリガされません。 このイベントはList.jsに属し、ウィジェットはpaging.jsです。

のvarのUserList =新しいリスト（ 'ユーザー'、オプション）;

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

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

検索が完了したとき$('#testTable').paging({limit:5});行がアクティブに取得しない - が、何らかの理由でそれが実行されません。

JSFiddle例：

http://jsfiddle.net/gxb16cen/

任意のヘルプ？ $('#testTable').paging({limit:5});を呼び出す

Answer 1

は、ウィジェットを作成しますが、それを更新しません。通常、この種のウィジェットは一度だけ呼び出す必要があり、メソッドを使用してそれを変更する必要があります。

あなたのケースでは、ウィジェットを更新機能を定義することができます。これは、_getNavBar()と​​メソッドの組み合わせのようなものです。例えば、このような何か：

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

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