Pagination - Webmatrix/razor

razor, twitter-bootstrap, webmatrix

Solution

Presumably you only want a Next or Previous button to appear if there is a next or previous page to go to? If so, and assuming that you are keeping track of the current page number in a variable called page, this is how you can do it:

<!--Pagination Start-->
<div class="pagination pagination-large">
<ul>
   @if(page > 1){
       <li><a href="/portfolio1/@(page-1)">Prev</a></li>
   }
   for (var i = 1; i < totalPages + 1; i++){
       <li><a href="/portfolio1/@i">@i</a></li>
   }
   if(page < totalPages){
       <li><a href="/portfolio1/@(page + 1)">Next</a></li>
   }
</ul>
</div>
<br>
<!--Pagination Finish-->

Problem

i have used Mike Brind's guide to set up pagination, which works a treat. I have also used bootstrap to create a better looking page navigation at the bottom of my page. Can you please let me know what i need to do so that the NEXT and PREV buttons work? i imagine it's be something like i+1 and i-1, but i've yet to figure it out. here's my code: EDITED CODE: ``` //Paging var pageSize = 6; var totalPages = 0; var count = 0; var page = UrlData[0].IsInt() ? UrlData[0].AsInt() : 1; var offset = (page -1) * pageSize; var db = Database.Open("StayInFlorida"); var sql = "Select Count(*) From PropertyInfo "; count = (int)db.QueryValue(sql); totalPages = count/pageSize; if(count % pageSize > 0){ totalPages += 1; } sql = "SELECT PropertyName, PropertyID, ResortName, NumBedrooms, NumBathrooms, NumSleeps, BriefDescription, PrimaryImage FROM PropertyInfo "+ "Order By PropertyID OFFSET @0 ROWS FETCH NEXT @1 ROWS ONLY;"; var result = db.Query(sql, offset, pageSize); <!--Pagination Start--> <div class="pagination pagination-centered"> <ul> @{ if(page > 1){ <li><a href="/portfolio1/@(page-1)">Prev</a></li> } for (var i = 1; i < totalPages + 1; i++){ <li><a href="/portfolio1/@i">@i</a></li> } if(page > 1){ <li><a href="/portfolio1/@(page + 1)">Next</a></li> } } </ul> </div> <br> <!--Pagination Finish--> ```

Original source