तालिका में क्लाइंट साइड पेजिंग जोड़ने के लिए KnockoutJS का उपयोग कैसे करें?

Question

मैं नॉकआउटजेएस के साथ पेजिंग कैसे जोड़ सकता हूं?

मेरे वर्तमान कोड है:

//assuming jsondata is a collection of data correctly passed into this function 

myns.DisplayFields = function(jsondata) { 
    console.debug(jsondata); 
    window.viewModel = { 
     fields: ko.observableArray(jsondata), 
     sortByName: function() { //plus any custom functions I would like to perform 
      this.items.sort(function(a, b) { 
       return a.Name < b.Name ? -1 : 1; 
      }); 
     }, 
    }; 

    ko.applyBindings(viewModel); 
} 

मेरा विचार:

<table> 
    <tbody data-bind='template: "fieldTemplate"'></tbody> 
</table> 

<script type="text/html" id="fieldTemplate"> 
{{each fields}} 
    <tr> 
     <td> ${ FieldId }</td> 
     <td>${ Type }</td> 
     <td><b>${ Name }</b>: ${ Description }</td> 
    </tr> 
{{/each}} 
</script> 

या मैं का प्रयोग करेंगे कर सके jQuery, jQuery यूआई या किसी अन्य पुस्तकालय?

myModel.gridViewModel = new ko.simpleGrid.viewModel({ 
    data: myModel.items, 
    columns: [ 
     { headerText: "Item Name", rowText: "name" }, 
     { headerText: "Sales Count", rowText: "sales" }, 
     { headerText: "Price", rowText: function (item) { return "$" + item.price.toFixed(2) } } 
    ], 
    pageSize: 4 
}); 

हालांकि मैं कहाँ pageSize मेरे कोड को जोड़ना होगा:

मैं एक उदाहरण के रूप KnockoutJS साइट पर देखा है? यह पृष्ठ आंतरिक रूप से कैसे चल रहा है?

Answer 1

मूल विचार है कि आप एक dependentObservableComputed Observables कि आपके वर्तमान पृष्ठ में पंक्तियों का प्रतिनिधित्व करता है और यह करने के लिए अपनी मेज बाध्य है। पृष्ठ के लिए पंक्तियां प्राप्त करने के लिए आप समग्र सरणी को टुकड़ा करेंगे। फिर, आपके पास पेजर इंडेक्स में हेरफेर करने वाले पेजर बटन/लिंक हैं, जो निर्भर ओब्सर्वेबल को फिर से मूल्यांकन करने का कारण बनते हैं जिसके परिणामस्वरूप वर्तमान पंक्तियां होती हैं।

अपने कोड के आधार पर, कुछ की तरह:

var myns = {}; 
myns.DisplayFields = function(jsondata) { 
    var viewModel = { 
     fields: ko.observableArray(jsondata), 
     sortByName: function() { //plus any custom functions I would like to perform 
      this.items.sort(function(a, b) { 
       return a.Name < b.Name ? -1 : 1; 
      }); 
     }, 
     pageSize: ko.observable(10), 
     pageIndex: ko.observable(0), 
     previousPage: function() { 
      this.pageIndex(this.pageIndex() - 1); 
     }, 
     nextPage: function() { 
      this.pageIndex(this.pageIndex() + 1); 
     } 
    }; 

    viewModel.maxPageIndex = ko.dependentObservable(function() { 
     return Math.ceil(this.fields().length/this.pageSize()) - 1; 
    }, viewModel); 

    viewModel.pagedRows = ko.dependentObservable(function() { 
     var size = this.pageSize(); 
     var start = this.pageIndex() * size; 
     return this.fields.slice(start, start + size); 
    }, viewModel); 

    ko.applyBindings(viewModel); 
}; 

तो, आप pagedRows अपनी तालिका को बाध्य होगा। यहाँ

नमूना: http://jsfiddle.net/rniemeyer/5Xr2X/

Answer 2

शायद https://github.com/addyosmani/backbone.paginator आप के लिए कुछ है? गीथूब पृष्ठ से:

बैकबोन.पैजिनेटर बैकबोन.जेएस का उपयोग करके डेटा के पेजिंग संग्रह के लिए राय वाले घटकों का एक सेट है। इसका उद्देश्य सर्वर (जैसे एक एपीआई) के अनुरोधों के पेजिनेशन के साथ-साथ डेटा के सिंगल लोड के पेजिनेशन के साथ सहायता के लिए दोनों समाधान प्रदान करना है, जहां हम एन परिणामों के संग्रह को एम पृष्ठों में एक दृश्य में आगे बढ़ाना चाहते हैं।

Answer 3

क्या आप जो चाहते थे उसे प्राप्त किया?

मैंने हाल ही में जिथब के लिए नॉकआउट का उपयोग करके एक अच्छा पेजर का एक उदाहरण धक्का दिया।

स्रोत के लिए https://github.com/remcoros/ko.pager और http://remcoros.github.com/ko.pager/example.html एक कार्य उदाहरण के लिए देखें।

सभी कंप्यूटेशंस और कुछ सुविधाजनक गुण 'पेजर' वर्ग द्वारा प्रदान किए जाते हैं, जिन्हें आप बना सकते हैं और बांध सकते हैं। एक उदाहरण काम कर रहे टेम्पलेट शामिल है।

कुछ दस्तावेज़ और उपयोग के लिए स्रोत example.html देखें।