विजेट चलाने से 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/

किसी भी मदद की?

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

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