Umbraco Razor пейджинг
У меня возникли проблемы с поиском механизма подкачки в Umbracos Razor viewengine с использованием AJAX.
Дело в том, что подкачка должна быть такой:
1 | 2 | 3 | 4 ... 16 Next >>
Когда пользователь нажал на что-то большее, чем 4 это должно быть так:
<< Previous 1 ... 6 | 7 | 8 | 9 | 10 ... 16 Next >>
Таким образом, он отображает предыдущие две страницы и следующие за страницами.
Теперь, когда пользователь щелкает полностью до последних 4 страниц, подкачка должна быть такой:
<< Previous 1 ... 13 | 14 | 15 | 16
У меня это работает, но код... не очень приятный, если не сказать больше. Это неуклюже, и у меня есть ощущение, что это можно сделать намного проще, чем это - просто не знаю, как именно:-)
Код (убедитесь, что у вас хорошая, теплая чашка кофе;-))
@* Paging *@
var resultCount = result.Count();
if(resultCount > take)
{
<div class="paging">
@{
int previous = pageNumber - 1;
if(previous >= 0)
{
<a class="previous" id="prev" href="#" onclick="ajaxFilterSearch('@themeIds', '@video', '@brochure', @previous, '@action', '@ingredientIds', '@ingredientId');"><img src="/img/buttons/pink-hand-left.png" />@umbraco.library.GetDictionaryItem("Previous")</a>
}
double numOfPagingLinks = Convert.ToDouble(resultCount) / take;
int roundedNumOfPagingLinks = Convert.ToInt32(Math.Floor(numOfPagingLinks));
int lastPage = roundedNumOfPagingLinks + 1;
if(lastPage > 4)
{
// Always show first page number
<a href="#" onclick="ajaxFilterSearch('@themeIds', '@video', '@brochure', '0', '@action', '@ingredientIds', '@ingredientId');">1</a>
if(pageNumber + 1 == lastPage)
{
<span> ... </span>
for(int i = lastPage - 4; i < lastPage - 1; i++)
{
int pagingNumber = i;
int numberToDisplay = i + 1;
string className = i == pageNumber ? "active" : "inactive";
<a href="#" class="@className" onclick="ajaxFilterSearch('@themeIds', '@video', '@brochure', @pagingNumber, '@action', '@ingredientIds', '@ingredientId');">@numberToDisplay</a>
<span> | </span>
}
}
else
{
if(pageNumber < 3)
{
for(int i = 1; i < 5; i++)
{
int pagingNumber = i;
int numberToDisplay = i + 1;
string className = i == pageNumber ? "active" : "inactive";
if(i == 1)
{
<span> | </span>
}
<a href="#" class="@className" onclick="ajaxFilterSearch('@themeIds', '@video', '@brochure', @pagingNumber, '@action', '@ingredientIds', '@ingredientId');">@numberToDisplay</a>
if(i < 4)
{
<span> | </span>
}
else
{
<span> ... </span>
}
}
}
else
{
if(pageNumber == 3)
{
for(int i = 1; i < 6; i++)
{
int pagingNumber = i;
int numberToDisplay = i + 1;
string className = i == pageNumber ? "active" : "inactive";
<a href="#" class="@className" onclick="ajaxFilterSearch('@themeIds', '@video', '@brochure', @pagingNumber, '@action', '@ingredientIds', '@ingredientId');">@numberToDisplay</a>
if(i < 5)
{
<span> | </span>
}
else
{
<span> ... </span>
}
}
}
else if(pageNumber > 3)
{
<span> ... </span>
if(pageNumber >= lastPage - 4)
{
for(int i = pageNumber - 2; i < lastPage - 1; i++)
{
int pagingNumber = i;
int numberToDisplay = i + 1;
string className = i == pageNumber ? "active" : "inactive";
<a href="#" class="@className" onclick="ajaxFilterSearch('@themeIds', '@video', '@brochure', @pagingNumber, '@action', '@ingredientIds', '@ingredientId');">@numberToDisplay</a>
<span> | </span>
}
}
else
{
var firstPrevious = pageNumber - 1;
var secondPrevious = pageNumber - 2;
var firstPreviousToDisplay = firstPrevious + 1;
var secondPreviousToDisplay = secondPrevious + 1;
<a href="#" onclick="ajaxFilterSearch('@themeIds', '@video', '@brochure', @secondPrevious, '@action', '@ingredientIds', '@ingredientId');">@secondPreviousToDisplay</a>
<span> | </span>
<a href="#" onclick="ajaxFilterSearch('@themeIds', '@video', '@brochure', @firstPrevious , '@action', '@ingredientIds', '@ingredientId');">@firstPreviousToDisplay </a>
<span> | </span>
for(int i = pageNumber; i < pageNumber + 3; i++)
{
int pagingNumber = i;
int numberToDisplay = i + 1;
string className = i == pageNumber ? "active" : "inactive";
<a href="#" class="@className" onclick="ajaxFilterSearch('@themeIds', '@video', '@brochure', @pagingNumber, '@action', '@ingredientIds', '@ingredientId');">@numberToDisplay</a>
if(i < pageNumber + 2)
{
<span> | </span>
}
}
<span> ... </span>
}
}
}
}
// Always show last pagenumber
<a href="#" onclick="ajaxFilterSearch('@themeIds', '@video', '@brochure', @roundedNumOfPagingLinks, '@action', '@ingredientIds', '@ingredientId');">@lastPage</a>
}
else
{
for (int i = 0; i < roundedNumOfPagingLinks + 1; i++)
{
int pagingNumber = i;
int numberToDisplay = i + 1;
string className = i == pageNumber ? "active" : "inactive";
<a href="#" class="@className" onclick="ajaxFilterSearch('@themeIds', '@video', '@brochure', @pagingNumber, '@action', '@ingredientIds', '@ingredientId');">@numberToDisplay</a><span> | </span>
}
}
int next = pageNumber + 1;
if (next <= roundedNumOfPagingLinks)
{
<a class="next" id="next" href="#" onclick="ajaxFilterSearch('@themeIds', '@video', '@brochure', @next, '@action', '@ingredientIds', '@ingredientId');">@umbraco.library.GetDictionaryItem("Next")<img src="/img/buttons/pink-hand-right.png" /></a>
}
}
</div>
}
result Переменная - это коллекция, найденная в фильтре / поиске. pageNumber Переменная - это номер страницы, на которую нажал пользователь.
Я знаю, что приведенный выше код является сложным и не очень красивым, но любая помощь / подсказка очень ценится!
Заранее спасибо.
1 ответ
Как насчет этого подхода: вы можете считать, что ваша страница имеет три возможных состояния и 7 компонентов. Государство № 1 - это то, что я бы назвал left (или же left_extended если общее количество страниц превышает 4), тогда пользователь остается на первых 4 страницах. Состояние № 2 middle, когда пользователь перемещается и еще не достиг последних 4 страниц. Состояние № 3 - это то, что я бы назвал rightЭто означает, что пользователь достиг последних 4 страниц.
Семь компонентов расположены так:
<< Previous1...6 | 7 | 8 | 9 | 10...16Next >>
Компонент в середине 6 | 7 | 8 | 9 | 10 это то, что я называю middle block, Учитывая три состояния и 7 компонентов, для всех состояний будет достаточно следующего кода:
// Middle block limits
var middleBlockStart = 0;
var middleBlockFinish = 0;
var middleBlockCount = 4;
int resultCount = result.Count();
int pageNumber = // Get information from query string
int numberOfPages = // Get the total number of pages
// There are three possible paging states: left, middle and right
// First we determine what state the paging is at and
// set the middle block limits
var pagingState = string.Empty;
if (pageNumber >= 4) {
if (numberOfPages > middleBlockCount)
pagingState = "left_extended";
else
pagingState = "left";
middleBlockStart = 1;
}
else if (pageNumber >= resultCount - middleBlockCount + 1) {
pagingState = "right";
middleBlockStart = resultCount - middleBlockCount + 1;
}
else {
pagingState = "middle";
middleBlockStart = pageNumber - 2;
middleBlockCount = 5;
}
middleBlockFinish = middleBlockStart + middleBlockCount;
// Now we print each one of the seven components
// based on the state of the paging
@if (pagingState == "middle" || pagingState == "right") {
<a class="previous" id="prev" href="#" onclick="ajaxFilterSearch(...);">
<img src="/img/buttons/pink-hand-left.png" />@umbraco.library.GetDictionaryItem("Previous")
</a>
<a href="#" onclick="ajaxFilterSearch(...);">1</a>
<span> ... </span>
}
@for (int i = middleBlockStart; i < middleBlockFinish; i++) {
<a href="#" class="@className" onclick="ajaxFilterSearch(...);">@i</a>
if (i != middleBlockFinish - 1)
<span> | </span>
}
@if (pagingState == "left_extended" || pagingState == "middle") {
<span> ... </span>
<a href="#" onclick="ajaxFilterSearch(...);">@lastPage</a>
}
@if (pagingState.StartsWith("left") || pagingState == "middle") {
<a class="next" id="next" href="#" onclick="ajaxFilterSearch(...);">
@umbraco.library.GetDictionaryItem("Next")<img src="/img/buttons/pink-hand-right.png" />
</a>
}
Я сократил ajaxFilterSearch() призывает к лучшей читаемости. Надеюсь, это поможет:)