non*_*ame 19 javascript pagination knockout.js typescript
我有一个div设置为绑定到a observeableArray,但我只想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();
}
}
}
mae*_*ael 43
使用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/(可能有点马车,但想法就在那里).
实际上我正在一个网站上工作,这个网站有很多表(大多数都需要分页).
实际上,我需要一些reusable-component分页来在我需要分页的所有情况下使用它.
此外,我需要比此问题的接受答案中提供的更高级的功能.
所以我开发了自己的组件来解决这个问题,就在这里.
有关更多详细信息,请继续阅读(请考虑从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>
特征
根据需要显示
当根本不需要分页时(例如需要显示小于页面大小的项目),HTML组件将消失.
这将通过声明确定data-bind="visible: NeedPaging".
根据需要禁用
,例如,如果您已经选择了最后一页,为什么要按last page或Next按钮可以按？
我正在处理这个,在这种情况下,我通过应用以下绑定禁用这些按钮 data-bind="css: { disabled: !PreviousPageActive() }"
区分Selected页面,在所选页面上应用
一个特殊类(在本例中称为active类),以使用户知道他/她现在在哪个页面.
这是通过绑定建立的data-bind="css: { active: $parent.CurrentPage() === $data }"
Last&First
进入第一页和最后一页也可通过专用的简单按钮获得.
显示按钮的限制
假设您有很多页面,例如1000页,那么会发生什么？你会为用户显示它们吗？绝对不是你必须根据当前页面显示其中的一些.例如,显示所选页面之前的3页和其他3页.
这个案例在这里处理了<!-- ko foreach: GetPages() -->
一个GetPages函数,该函数应用一个简单的算法来确定我们是否需要显示所有页面(页面数量低于阈值,可以很容易地确定),或者只显示一些按钮.
您可以通过更改maxPageCount变量的值来确定阈值
现在我将其分配为以下var maxPageCount = 7;,这意味着可以为用户显示不超过7个按钮(在SelectedPage之前3个,在Selected Page之后3个)和Selected页面本身.
您可能想知道,如果在当前页面显示之前OR之后没有足够的页面会怎么样？不要担心我在算法中处理这个,
例如,如果你有11 pages和你有maxPageCount = 7和当前selected page is 10,那么以下页面将显示
5,6,7,8,9,10(selected page),11
所以我们总是分层maxPageCount,在前面的例子中显示5所选页面之前的页面和1后面的页面选定的页面.
选定页面验证 用户确定所选页面
的CurrentPageobservable的所有设置操作都将通过该功能.只有这个函数我们设置这个可观察的,正如你从代码中看到的那样,在设置值之前我们进行验证操作以确保我们不会超出页面的可用页面.SetCurrentPage
已经清洁
我只使用pureComputed不computed属性,这意味着你不需要打扰自己清理和处理这些属性.虽然,正如您将在下面的示例中看到的那样,您需要处理组件本身之外的其他一些订阅
注1:
您可能会注意到我bootstrap在这个组件中使用了一些类,这对我来说很合适,但是,当然,您可以使用自己的类而不是引导类.
我这里使用的自举类是pagination,pagination-sm,active和disabled
随意,因为你需要改变它们.
注2:
因此我为您介绍了该组件,现在是时候看看它是如何工作的.
您可以将此组件集成到主ViewModel中,如下所示.
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();
}
}
最后但并非最不重要的,当然不要忘记根据您的特殊viewModel更改HTML组件中的绑定,或者用with binding这样的方式包装所有组件
<div data-bind="with: PagingComponent()">
<!-- put the component here -->
</div>
干杯