XfallingpointX
New Member
I'm having some trouble figuring out a paging mechanism in Umbracos Razor viewengine using AJAX.Thing is, that the paging needs to be like this:\[code\]1 | 2 | 3 | 4 ... 16 Next >>\[/code\]When the user has clicked on anything greater than \[code\]4\[/code\] it needs to be like this:\[code\]<< Previous 1 ... 6 | 7 | 8 | 9 | 10 ... 16 Next >>\[/code\]So it displays the previous two pages and the next to pages.Now, when a user clicks all the way to the last 4 pages, the paging needs to be like this:\[code\]<< Previous 1 ... 13 | 14 | 15 | 16 \[/code\]I have got it working, but the code is ... not pretty, to say the least. It's clumsy and I've got a feeling that it could be made a lot more simple than it is - just not sure how exactly 
The code (make sure you have a nice, warm cup of coffee ;-))\[code\] @* Paging *@ var resultCount = result.Count(); if(resultCount > take) { <div class="paging"> @{ int previous = pageNumber - 1; if(previous >= 0) { <a class="previous" id="prev" href="http://stackoverflow.com/questions/15522722/#" onclick="ajaxFilterSearch('@themeIds', '@video', '@brochure', @previous, '@action', '@ingredientIds', '@ingredientId');"><img src="http://stackoverflow.com/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="http://stackoverflow.com/questions/15522722/#" 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="http://stackoverflow.com/questions/15522722/#" 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="http://stackoverflow.com/questions/15522722/#" 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="http://stackoverflow.com/questions/15522722/#" 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="http://stackoverflow.com/questions/15522722/#" 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="http://stackoverflow.com/questions/15522722/#" onclick="ajaxFilterSearch('@themeIds', '@video', '@brochure', @secondPrevious, '@action', '@ingredientIds', '@ingredientId');">@secondPreviousToDisplay</a> <span> | </span> <a href="http://stackoverflow.com/questions/15522722/#" 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="http://stackoverflow.com/questions/15522722/#" 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="http://stackoverflow.com/questions/15522722/#" 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="http://stackoverflow.com/questions/15522722/#" 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="http://stackoverflow.com/questions/15522722/#" onclick="ajaxFilterSearch('@themeIds', '@video', '@brochure', @next, '@action', '@ingredientIds', '@ingredientId');">@umbraco.library.GetDictionaryItem("Next")<img src="http://stackoverflow.com/img/buttons/pink-hand-right.png" /></a> } } </div> } \[/code\]The \[code\]result\[/code\] variable is the collection found in the filter/search. The \[code\]pageNumber\[/code\] variable is the page number that the user has clicked.I know the above code is complex and not pretty, but any help/hint is greatly appreciated!Thanks in advance.
The code (make sure you have a nice, warm cup of coffee ;-))\[code\] @* Paging *@ var resultCount = result.Count(); if(resultCount > take) { <div class="paging"> @{ int previous = pageNumber - 1; if(previous >= 0) { <a class="previous" id="prev" href="http://stackoverflow.com/questions/15522722/#" onclick="ajaxFilterSearch('@themeIds', '@video', '@brochure', @previous, '@action', '@ingredientIds', '@ingredientId');"><img src="http://stackoverflow.com/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="http://stackoverflow.com/questions/15522722/#" 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="http://stackoverflow.com/questions/15522722/#" 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="http://stackoverflow.com/questions/15522722/#" 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="http://stackoverflow.com/questions/15522722/#" 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="http://stackoverflow.com/questions/15522722/#" 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="http://stackoverflow.com/questions/15522722/#" onclick="ajaxFilterSearch('@themeIds', '@video', '@brochure', @secondPrevious, '@action', '@ingredientIds', '@ingredientId');">@secondPreviousToDisplay</a> <span> | </span> <a href="http://stackoverflow.com/questions/15522722/#" 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="http://stackoverflow.com/questions/15522722/#" 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="http://stackoverflow.com/questions/15522722/#" 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="http://stackoverflow.com/questions/15522722/#" 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="http://stackoverflow.com/questions/15522722/#" onclick="ajaxFilterSearch('@themeIds', '@video', '@brochure', @next, '@action', '@ingredientIds', '@ingredientId');">@umbraco.library.GetDictionaryItem("Next")<img src="http://stackoverflow.com/img/buttons/pink-hand-right.png" /></a> } } </div> } \[/code\]The \[code\]result\[/code\] variable is the collection found in the filter/search. The \[code\]pageNumber\[/code\] variable is the page number that the user has clicked.I know the above code is complex and not pretty, but any help/hint is greatly appreciated!Thanks in advance.