我有一个设置为绑定到observeableArray
的div,但我只想在任何给定时间显示来自observeableArray
的最多50个项目。我想用上一个和下一个按钮以及页面上的索引分页来处理这个问题,以允许用户循环浏览集合中的项目页面。
我知道我可以用computedObservable
来做这件事。和自定义数据绑定,但我不知道该怎么做(我仍然是一个淘汰赛新手)。
谁能指出我正确的方向?
这是我的代码(JS在TypeScript中):
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<%=
if params[:q]
render 'active_search.html.erb'
else
render 'passive_search.html.erb'
end
%>
<%= form_tag("/search", method: "get", :class => "form-search form-inline") do %>
<%= label_tag(:q, "Search for:") %>
<%= text_field_tag(:q, nil, class:"input-medium search-query") %>
<%= submit_tag("Search", :class=>"btn") %>
<% end %>
<div class="media" data-bind="foreach: tweetsArray">
<%= image_tag('twitter-icon.svg', :class=>"tweet_img", :style=>"display:inline;") %>
<div class="media-body" style="display:inline;">
<h4 class="media-heading" data-bind="text: user.screen_name" style="display:inline;"></h4>
<span data-bind="text:text" style="display:inline;"></span> <br />
<span data-bind="text:'Created at '+created_at"></span> <br />
</div>
</div>
<div class="pagination pagination-centered">
<ul>
<li>
<a href="#">Prev</a>
</li>
<li>
<a href="#">1</a>
</li>
<li>
<a href="#">Next</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<script>
var viewModel = new twitterResearch.TweetViewModel();
ko.applyBindings(viewModel);
//TODO: notes to self, use custom binding for pagination along with a computed observable to determine where at in the list you are
//document.onReady callback function
$(function() {
$.getJSON('twitter', {}, function(data) {
viewModel.pushTweet(data);
console.log(data.user);
});
});
</script>
declare var $: any;
declare var ko: any;
module twitterResearch {
class Tweet {
text: string;
created_at: string;
coordinates: string;
user: string;
entities: string;
id: number;
id_str: string;
constructor(_text: string, _created_at: string, _coordinates: any, _user: any,
_entities: any, _id_str: string, _id: number){
this.text = _text;
this.created_at = _created_at;
this.coordinates = _coordinates;
this.user = _user;
this.entities = _entities;
this.id_str = _id_str;
this.id = _id;
}
}
export class TweetViewModel{
tweetsArray: any;
constructor()
{
this.tweetsArray = ko.observableArray([]);
}
//tweet is going to be the JSON tweet we return
//from the server
pushTweet(tweet)
{
var _tweet = new Tweet(tweet.text, tweet.created_at, tweet.coordinates,
tweet.user, tweet.entities, tweet.id_str, tweet.id);
this.tweetsArray.push(_tweet);
this.tweetsArray.valueHasMutated();
}
}
}
答案 0 :(得分:42)
使用Knockout进行分页非常简单。我个人会这样做:
鉴于此,您现在可以添加一个递增(下一个)或递减(前一个)当前页面的函数。
这是一个简单的例子:
var Model = function() {
var self = this;
this.all = ko.observableArray([]);
this.pageNumber = ko.observable(0);
this.nbPerPage = 25;
this.totalPages = ko.computed(function() {
var div = Math.floor(self.all().length / self.nbPerPage);
div += self.all().length % self.nbPerPage > 0 ? 1 : 0;
return div - 1;
});
this.paginated = ko.computed(function() {
var first = self.pageNumber() * self.nbPerPage;
return self.all.slice(first, first + self.nbPerPage);
});
this.hasPrevious = ko.computed(function() {
return self.pageNumber() !== 0;
});
this.hasNext = ko.computed(function() {
return self.pageNumber() !== self.totalPages();
});
this.next = function() {
if(self.pageNumber() < self.totalPages()) {
self.pageNumber(self.pageNumber() + 1);
}
}
this.previous = function() {
if(self.pageNumber() != 0) {
self.pageNumber(self.pageNumber() - 1);
}
}
}
你会在这里找到一个简单而完整的例子:http://jsfiddle.net/LAbCv/(可能有点马车,但想法就在那里)。
答案 1 :(得分:9)
实际上我在一个网站上工作,这个网站有很多表(大多数都需要分页)。实际上,我需要一些reusable-component
来进行分页,以便在所有情况下使用它我需要分页。
此外,我需要比此问题的接受答案中提供的更多高级功能。
所以我开发了自己的组件来解决这个问题,就在这里。
<强> Now on Github 强>
<强> JsFiddle 强>
有关更多详细信息,请继续阅读(请考虑从GitHub获取代码,而不是从此处获取代码,因为GitHub代码已更新并增强,因为我将其放在此处)
<强>的JavaScript 强>
function PagingVM(options) {
var self = this;
self.PageSize = ko.observable(options.pageSize);
self.CurrentPage = ko.observable(1);
self.TotalCount = ko.observable(options.totalCount);
self.PageCount = ko.pureComputed(function () {
return Math.ceil(self.TotalCount() / self.PageSize());
});
self.SetCurrentPage = function (page) {
if (page < self.FirstPage)
page = self.FirstPage;
if (page > self.LastPage())
page = self.LastPage();
self.CurrentPage(page);
};
self.FirstPage = 1;
self.LastPage = ko.pureComputed(function () {
return self.PageCount();
});
self.NextPage = ko.pureComputed(function () {
var next = self.CurrentPage() + 1;
if (next > self.LastPage())
return null;
return next;
});
self.PreviousPage = ko.pureComputed(function () {
var previous = self.CurrentPage() - 1;
if (previous < self.FirstPage)
return null;
return previous;
});
self.NeedPaging = ko.pureComputed(function () {
return self.PageCount() > 1;
});
self.NextPageActive = ko.pureComputed(function () {
return self.NextPage() != null;
});
self.PreviousPageActive = ko.pureComputed(function () {
return self.PreviousPage() != null;
});
self.LastPageActive = ko.pureComputed(function () {
return (self.LastPage() != self.CurrentPage());
});
self.FirstPageActive = ko.pureComputed(function () {
return (self.FirstPage != self.CurrentPage());
});
// this should be odd number always
var maxPageCount = 7;
self.generateAllPages = function () {
var pages = [];
for (var i = self.FirstPage; i <= self.LastPage() ; i++)
pages.push(i);
return pages;
};
self.generateMaxPage = function () {
var current = self.CurrentPage();
var pageCount = self.PageCount();
var first = self.FirstPage;
var upperLimit = current + parseInt((maxPageCount - 1) / 2);
var downLimit = current - parseInt((maxPageCount - 1) / 2);
while (upperLimit > pageCount) {
upperLimit--;
if (downLimit > first)
downLimit--;
}
while (downLimit < first) {
downLimit++;
if (upperLimit < pageCount)
upperLimit++;
}
var pages = [];
for (var i = downLimit; i <= upperLimit; i++) {
pages.push(i);
}
return pages;
};
self.GetPages = ko.pureComputed(function () {
self.CurrentPage();
self.TotalCount();
if (self.PageCount() <= maxPageCount) {
return ko.observableArray(self.generateAllPages());
} else {
return ko.observableArray(self.generateMaxPage());
}
});
self.Update = function (e) {
self.TotalCount(e.TotalCount);
self.PageSize(e.PageSize);
self.SetCurrentPage(e.CurrentPage);
};
self.GoToPage = function (page) {
if (page >= self.FirstPage && page <= self.LastPage())
self.SetCurrentPage(page);
}
self.GoToFirst = function () {
self.SetCurrentPage(self.FirstPage);
};
self.GoToPrevious = function () {
var previous = self.PreviousPage();
if (previous != null)
self.SetCurrentPage(previous);
};
self.GoToNext = function () {
var next = self.NextPage();
if (next != null)
self.SetCurrentPage(next);
};
self.GoToLast = function () {
self.SetCurrentPage(self.LastPage());
};
}
<强> HTML 强>
<ul data-bind="visible: NeedPaging" class="pagination pagination-sm">
<li data-bind="css: { disabled: !FirstPageActive() }">
<a data-bind="click: GoToFirst">First</a>
</li>
<li data-bind="css: { disabled: !PreviousPageActive() }">
<a data-bind="click: GoToPrevious">Previous</a>
</li>
<!-- ko foreach: GetPages() -->
<li data-bind="css: { active: $parent.CurrentPage() === $data }">
<a data-bind="click: $parent.GoToPage, text: $data"></a>
</li>
<!-- /ko -->
<li data-bind="css: { disabled: !NextPageActive() }">
<a data-bind="click: GoToNext">Next</a>
</li>
<li data-bind="css: { disabled: !LastPageActive() }">
<a data-bind="click: GoToLast">Last</a>
</li>
</ul>
功能强>
显示需要
当根本不需要分页时(例如需要显示小于页面大小的项目),{{1} }组件将消失。
这将由声明HTML
确定。
根据需要禁用
例如,如果您已经选择了最后一页,为什么要按data-bind="visible: NeedPaging"
或last page
按钮?
我正在处理此问题,在这种情况下,我通过应用以下绑定来禁用这些按钮 Next
区分所选页面
在所选页面上应用一个特殊类(在本例中称为data-bind="css: { disabled: !PreviousPageActive() }"
类),以使用户知道他/她现在在哪个页面中。
这是通过绑定active
最后&amp;首先
通过专门用于此的简单按钮也可以访问第一页和最后一页。
显示按钮的限制
假设你有很多页面,例如1000页,那么会发生什么?你会为用户显示它们吗? 绝对不你必须根据当前页面只显示其中一些。例如,显示所选页面之前的3页和其他3页。
此案件已在此处理data-bind="css: { active: $parent.CurrentPage() === $data }"
<!-- ko foreach: GetPages() -->
函数应用一个简单的算法来确定我们是否需要显示所有页面(页面数量低于阈值,可以很容易地确定),或者只显示一些按钮。
您可以通过更改GetPages
变量的值来确定阈值
现在我将它指定为以下maxPageCount
,这意味着可以为用户显示不超过7个按钮(在SelectedPage之前为3,在Selected Page之后为3)和Selected Page本身。
您可能想知道,如果在当前页面显示之前 OR 之后没有足够的页面会怎么样? 不要担心我在算法中处理此问题例如,如果您有var maxPageCount = 7;
并且您有11 pages
和当前maxPageCount = 7
,那么以下页面将显示
selected page is 10
所以我们总是将5,6,7,8,9,10(selected page),11
分层,在上一个示例中,在所选页面之前显示maxPageCount
页面,在所选页面之后只显示5
页面。
所选页面验证
用户确定所选页面的1
可观察的所有设置操作都将通过函数CurrentPage
。在这个函数中,我们设置了这个可观察的,从代码中可以看出,在设置值之前,我们进行验证操作,以确保我们不会超出页面的可用页面。
已经清洁
我只使用SetCurrentPage
而非pureComputed
属性,这意味着您无需为打扫和处理这些属性而烦恼。 虽然您将在下面的示例中看到,但您需要处理组件本身之外的其他一些订阅
注1
您可能会注意到我在此组件中使用了一些computed
类,
这适合我,但,当然,你可以使用自己的类而不是bootstrap类。
我在这里使用的引导类是bootstrap
,pagination
,pagination-sm
和active
随意根据需要更改它们。
注2
所以我为你介绍了这个组件,是时候看看它是如何工作的。
您可以将此组件集成到主ViewModel中,如下所示。
disabled
最后但并非最不重要的,当然不要忘记根据您的特殊viewModel更改HTML组件中的绑定,或者使用function MainVM() {
var self = this;
self.PagingComponent = ko.observable(new Paging({
pageSize: 10, // how many items you would show in one page
totalCount: 100, // how many ALL the items do you have.
}));
self.currentPageSubscription = self.PagingComponent().CurrentPage.subscribe(function (newPage) {
// here is the code which will be executed when the user changes the page.
// you can handle this in the way you need.
// for example, in my case, I am requesting the data from the server again by making an ajax request
// and then updating the component
var data = /*bring data from server , for example*/
self.PagingComponent().Update({
// we need to set this again, why? because we could apply some other search criteria in the bringing data from the server,
// so the total count of all the items could change, and this will affect the paging
TotalCount: data.TotalCount,
// in most cases we will not change the PageSize after we bring data from the server
// but the component allows us to do that.
PageSize: self.PagingComponent().PageSize(),
// use this statement for now as it is, or you have to made some modifications on the 'Update' function.
CurrentPage: self.PagingComponent().CurrentPage(),
});
});
self.dispose = function () {
// you need to dispose the manual created subscription, you have created before.
self.currentPageSubscription.dispose();
}
}
这样包装所有组件
with binding
干杯
答案 2 :(得分:1)
我创建了一个博客帖子,详细解释了如何在一个小JQuery插件(here)的帮助下创建分页。
基本上,我使用了与AJAX的正常淘汰数据绑定,并且在从服务器检索数据之后,我调用了插件。你可以找到插件here。它被称为简单分页。
答案 3 :(得分:1)
这个问题仍然是&#34;淘汰分页&#34;的热门搜索之一,所以淘汰赛延期knockout-paging(git)值得一提。
它通过扩展ko.observableArray
来提供分页。它有详细记录且易于使用
用法示例为here。