使用淘汰JSON数据的分页 [英] Pagination using knockout JSON data
本文介绍了使用淘汰JSON数据的分页的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何修改以下javascript文件以包含具有pagenumber链接的分页，以便用户可以直接转到所需页面而不是按下一个或上一个按钮：
How to modify the below javascript file to include pagination having pagenumber link so that user can straight away go the required page rather than pressing next or previous button:
$(document).ready(function () {
var jsondata = JSON.parse(var1);
DisplayFields = function (jsondata) {
var viewModel = {
d: ko.observableArray(jsondata),
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.d().length / this.pageSize()) - 1;
}, viewModel);
viewModel.pagedRows = ko.dependentObservable(function () {
var size = this.pageSize();
var start = this.pageIndex() * size;
return this.d().slice(start, start + size);
}, viewModel);
ko.applyBindings(viewModel, document.getElementById("Datasection"));
ko.applyBindings(viewModel, document.getElementById("prevnext"));
};
DisplayFields(jsondata);
});
<section class="col-lg-12 paddingBottom40 paddingTop20 RecentInnovation" id="Datasection" data-bind='template: { foreach: pagedRows }'>
<div class="row">
<section class="col-lg-1 col-md-1 col-sm-1 col-xs-4">
<div class="bgOrange blue text-center paddingTop10 paddingBottom10">
<span class="size18" data-bind="text: Views"></span>
<br>
View
</div>
</section>
<section class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
<a data-bind="attr: { href: '../SitePages/IdeaDetails.aspx?ideaid=' + ID }" class="size14 green"><strong><span data-bind=" text: BusinessProblem"></span></strong></a>
<br>
<p class="paddingTop5">Category:<span data-bind="text: InnovationType" class="green"></span> Submitted by: <span data-bind=" text: Requester" class="green"></span> On <span data-bind=" text: Created " class="green"></span></p>
<p class="paddingTop5">Tags: <span data-bind="text: Keywords" class="green"></span>   Domain: <span data-bind=" text: Domain" class="green"></span>   SubDomain: <span data-bind=" text: SubDomain" class="green"></span></p>
</section>
<section class="col-lg-2 col-md-2 col-sm-2 col-xs-12 text-right"><span data-bind="text: Status"></span><span data-bind=" css: statusCss"></span></section>
</div>
</section>
推荐答案
（document）.ready（function（）{
var jsondata = JSON.parse（var1）;
DisplayFields = function（jsondata）{
var viewModel = {
d：ko.observableArray（jsondata），
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 .d（）。length / this .pageSize（）） - 1 ;
}，viewModel）;
viewModel.pagedRows = ko.dependentObservable（function（）{
var size = this .pageSize（）;
var start = this .pageIndex（）* size;
return this .d（）。slice（start，start + size）;
}，viewModel）;
ko.applyBindings（viewModel，document.getElementById（ Datasection））;
ko.applyBindings（viewModel，document.getElementById（ prevnext））;
};
DisplayFields（jsondata）;
}）;
(document).ready(function () { var jsondata = JSON.parse(var1); DisplayFields = function (jsondata) { var viewModel = { d: ko.observableArray(jsondata), 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.d().length / this.pageSize()) - 1; }, viewModel); viewModel.pagedRows = ko.dependentObservable(function () { var size = this.pageSize(); var start = this.pageIndex() * size; return this.d().slice(start, start + size); }, viewModel); ko.applyBindings(viewModel, document.getElementById("Datasection")); ko.applyBindings(viewModel, document.getElementById("prevnext")); }; DisplayFields(jsondata); });
<section class="col-lg-12 paddingBottom40 paddingTop20 RecentInnovation" id="Datasection" data-bind='template: { foreach: pagedRows }'>
<div class="row">
<section class="col-lg-1 col-md-1 col-sm-1 col-xs-4">
<div class="bgOrange blue text-center paddingTop10 paddingBottom10">
<span class="size18" data-bind="text: Views"></span>
<br>
View
</div>
</section>
<section class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
<a data-bind="attr: { href: '../SitePages/IdeaDetails.aspx?ideaid=' + ID }" class="size14 green"><strong><span data-bind=" text: BusinessProblem"></span></strong></a>
<br>
<p class="paddingTop5">Category:<span data-bind="text: InnovationType" class="green"></span> Submitted by: <span data-bind=" text: Requester" class="green"></span> On <span data-bind=" text: Created " class="green"></span></p>
<p class="paddingTop5">Tags: <span data-bind="text: Keywords" class="green"></span>   Domain: <span data-bind=" text: Domain" class="green"></span>   SubDomain: <span data-bind=" text: SubDomain" class="green"></span></p>
</section>
<section class="col-lg-2 col-md-2 col-sm-2 col-xs-12 text-right"><span data-bind="text: Status"></span><span data-bind=" css: statusCss"></span></section>
</div>
</section>
喜欢这个？
Like this?
<ul class="pagination" data-bind="foreach : ko.utils.range(1,
data.maxPageIndex（）） >
< li > < a < span class =code-attribute> href = ＃ data-bind = text：
data.maxPageIndex())"> <li><a href="#" data-bind="text :
这篇关于使用淘汰JSON数据的分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
