我在使用AJAX在Umbracos Razor viewengine中找出分页机制时遇到了一些麻烦。
事实是，分页需要像这样：
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变量是用户点击的页码。
我知道上面的代码很复杂而且不漂亮，但是非常感谢任何帮助/提示！
提前致谢。
答案 0 :(得分：0)
这种方法怎么样：您可以认为您的分页有三种可能的状态和7种组件。状态＃1是我称之为left（或left_extended，如果总共超过4页），那就是当用户仍在前4页时。状态＃2是middle，即用户导航时尚未到达最后4页。状态＃3是我称之为right，意味着用户已经到达最后4页。
七个组件的布置如下：
<< Previous 1 ... 6 | 7 | 8 | 9 | 10 ... 16 Next >>
中间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()次来电，以提高可读性。我希望这会有所帮助：）