L'esecuzione di un widget non funziona da un evento generato da list.js

Question

Sto provando a eseguire un widget all'interno di un gestore di eventi.

Per qualche motivo, il widget non viene attivato all'interno della funzione del gestore eventi. Questo evento appartiene a List.js, il widget è paging.js.

var userList = new List ('utenti', opzioni);

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

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

La fila $('#testTable').paging({limit:5}); venga attivata quando la ricerca è terminata - ma per qualche ragione non viene eseguito.

JSFiddle esempio:

http://jsfiddle.net/gxb16cen/

Qualsiasi aiuto?

Answer 1

Chiamare $('#testTable').paging({limit:5}); crea il widget ma non lo aggiorna. Normalmente dovresti chiamare questo tipo di widget solo una volta, e usare i metodi per modificarlo.

Nel tuo caso puoi definire una funzione che aggiorna il widget. Sarebbe una specie di combinazione dei metodi _getNavBar() e showPage(). Qualcosa di simile ad esempio:

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

Quindi si chiama l'aggiornamento sull'evento di ricerca. Come questo:

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

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