शुभ दोपहर हाल ही में मैंने Backbone.js के लिए पेजिनेशन लिखा है, इसलिए मैं आपके साथ साझा करना चाहूंगा, शायद कोई काम आएगा।

हमें फॉर्म का पेजिनेशन करने की आवश्यकता है:

१ ... ३ ४ ५ ६ 12 ... १२

कार्यान्वयन के लिए, आपको पेजिनेशन व्यू और पेजिनेशन-व्यू टेम्पलेट की आवश्यकता होगी।

देखें - पेजिनेशन व्यू

window.PaginationView = Backbone.View.extend({ template: _.template($("#pagination-view").html()), //  link: "", //  page_count: null, // -  page_active: null, //   page_show: 5, // -     attributes: { //   "class": "pagination" }, initialize: function(params) { //  this.link = params.link; this.page_count = params.page_count; if (this.page_count <= this.page_show) { this.page_show = this.page_count; } this.page_active = params.page_active; }, render: function(eventName) { //  ... } }); 

हमारे पास प्रजातियों का ऐसा विवरण है। हम कंस्ट्रक्टर में मापदंडों को स्वीकार करते हैं, परमेस मापदंडों का एक उद्देश्य है।

अब जारी करने के तर्क पर विचार करें। पृष्ठांकन, या दृश्य पृष्ठों के ब्लॉक को जारी करने के लिए, हमें इन पृष्ठों के आरंभ और अंत के सूचकांक को खोजने की आवश्यकता है। हम सक्रिय से पहले और बाद में तत्वों की संख्या की तलाश कर रहे हैं। यानी आधे में बांट दो।

 var range = Math.floor(this.page_show / 2); var nav_begin = this.page_active - range; if (this.page_show % 2 == 0) { //   - nav_begin++; } var nav_end = this.page_active + range; 

आगे हमें यह पता लगाने की जरूरत है कि क्या हमें हर तरफ से "..." देने की जरूरत है। हम दो चर शुरू करते हैं जो दिखाते हैं कि हमें क्या चाहिए:

 var left_dots = true; var right_dots = true; 

और इसलिए, जब हमें "..." की आवश्यकता होती है, जब शुरुआत 2 (बाईं ओर) से अधिक होती है और जब शुरुआत अंत से कम होती है - 1 (दाईं ओर)। ऐसा करने के लिए, हम दो चेक लिखते हैं जिसमें हम एक और विशेष मामले का विश्लेषण करते हैं। यह इस तथ्य में शामिल है कि अगर हमारे पास एक सक्रिय दूसरा है, तो जारी करने वाली इकाई में एक और तत्व है।

१ २ ३ ४ ५ ६ ... १२

और अंत में भी।

1 ... 7 8 9 10 11 12

 if (nav_begin <= 2) { nav_end = this.page_show; if (nav_begin == 2) { nav_end++; } nav_begin = 1; left_dots = false; } if (nav_end >= this.page_count - 1 ) { nav_begin = this.page_count - this.page_show + 1; if (nav_end == this.page_count - 1) { nav_begin--; } nav_end = this.page_count; right_dots = false; } 

और अंत में हम टेम्पलेट पर भेजते हैं:

 $(this.el).html( this.template({ link: this.link, page_count: this.page_count, page_active: this.page_active, nav_begin: nav_begin, nav_end: nav_end, left_dots: left_dots, right_dots: right_dots }) ); 

पेजिनेशन-व्यू टेम्प्लेट

ट्विटर बूटस्ट्रैप का उपयोग करके लिखा गया टेम्प्लेट। तुच्छ मुद्दा।

 <ul> <% if (page_active > 1) { %> <li><a href="<%= link %><%= page_active-1 %>">«</a></li> <% } %> <% if (left_dots) {%> <li><a href="<%= link %>1">1</a></li> <li class="disabled"><a href="#">...</a></li> <% } %> <% for (var i = nav_begin; i <= nav_end; i++) { %> <li <% if (page_active == i) print('class="active"') %> ><a href="<%= link %><%= i %>"><%= i %></a></li> <% } %> <% if (right_dots) {%> <li class="disabled"><a href="#">...</a></li> <li><a href="<%= link %><%= page_count %>"><%= page_count %></a></li> <% } %> <% if (page_active < page_count) { %> <li><a href="<%= link %><%= page_active+1 %>">»</a></li> <% } %> </ul> 

पुनश्च सब कुछ बहुत सरल है, ले और उपयोग :)।
पीपीएस हाल के वर्षों में, मैं बैकबोन पर बहुत कुछ लिखता हूं। आपकी अनुमति से मैं इसी तरह की चीजें पोस्ट करूंगा।