2

我在使用 AJAX 找出 Umbracos Razor 视图引擎中的分页机制时遇到了一些麻烦。

事情是，分页需要是这样的：

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页码。

我知道上面的代码很复杂而且不漂亮，但是非常感谢任何帮助/提示！

提前致谢。

4

1 回答 1

1

这种方法怎么样：您可以认为您的分页具有三种可能的状态和 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()要求以提高可读性。我希望这有帮助 ：）

于 2013-03-26T16:27:21.217 回答