StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The basic idea is that you have a <s><a href="http://knockoutjs.com/documentation/dependentObservables.html" rel="nofollow">dependentObservable</a></s> <a href="http://knockoutjs.com/documentation/computedObservables.html" rel="nofollow">Computed Observables</a> that represents the rows in your current page and bind your table to it. You would slice the overall array to get the rows for the page. Then, you have pager buttons/links that manipulate the page index, which causes the dependentObservable to be re-evaluated resulting in the current rows.</p> <p>Based on your code, something like:</p> <pre><code>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); }; </code></pre> <p>So, you would bind your table to <code>pagedRows</code>.</p> <p>Sample here: <a href="http://jsfiddle.net/rniemeyer/5Xr2X/" rel="nofollow">http://jsfiddle.net/rniemeyer/5Xr2X/</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload