2013-03-20 5 views
1

AJAX를 사용하여 Umbracos 면도기 뷰 엔진에서 페이징 메커니즘을 파악하는 데 문제가 있습니다.Umbraco 면도기 페이징

것은 페이징이 이렇게 될 필요가있다 :

사용자가이 같이 할 필요가 4 이상 아무것도 클릭 한
1 | 2 | 3 | 4 ... 16 Next >> 

:

<< 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

이 방법은 페이징에 가능한 세 가지 상태와 7 가지 구성 요소가 있다고 생각할 수 있습니다. 상태 # 1은 내가 총 4 페이지 이상인 경우 left (또는 left_extended)이라고하며 사용자가 처음 4 페이지에있는 경우입니다. 상태 # 2는 middle입니다. 사용자가 탐색 중이며 아직 마지막 4 페이지에 도달하지 않은 경우입니다. 상태 # 3은 사용자가 마지막 4 페이지에 도달했음을 의미하는 right이라고합니다.

일곱 개 구성 요소는 다음과 같이 배치 :

<< 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() 호출을 단축했다. 이 도움이되기를 바랍니다 :)