I need to display the pagination like 1 2 3 4 5 ……… 18. with Prev and Next hyper link.
Hello,
please see this post here: http://www.mikesdotnetting.com/article/181/the-webgrid-efficient-paging-and-sorting-with-sql-ce-4-0
and this here: http://www.mikesdotnetting.com/article/150/web-pages-efficient-paging-without-the-webgrid
Hello,
You can use WebGrid to show the data. It has the possibility to show data on pages.
http://www.asp.net/web-pages/overview/getting-started/introducing-aspnet-web-pages-2/displaying-data
Hi Dow,
Thanks for your response. We know about paging. I just wanna know how to style the Pager to show the number like <<Prev 1 2 3 4 …….. 10 Next >>
I hope that the codes below will help you.
<p> @{ for (var i = Math.Max(1, page - 4); i < Math.Min(page + 4, totalPages + 1); i++) { if (i == page) { <span>@i</span> } else { <a href="/@i">@i</a> } } } <span>Page @page / @totalPages</span> @if (totalPages > 1) { <a href="/">@First page</a> <a href="/@totalPages">@Last page</a> } </p>
Or
@foreach (var item in items.Skip((page - 1) * pageSize).Take(pageSize)) { <div class="item"> <a href="@item.Url">@item.Name</a> </div> } @if (totalPages > 1) { <div class="pagination"> <ul> @if (page > 1) { <li><a href="?page=@(page-1)">Prev</a></li> } @for (int p = 1; p < totalPages + 1; p++) { var active = (p == page) ? "active" : string.Empty; <li class="@active"> <a href="?page=@p">1</a> </li> } @if (page < items.Count()) { <li><a href="?page=@(page+1)">Next</a></li> } </ul> </div> }
Just mix them in one code to get the style you want. <<Prev 1 2 3 … 10 Next>>
Hi Riyaj, this is what you are looking for ?
@grid.GetHtml( tableStyle: "grid", headerStyle: "header", footerStyle: "grid-footer", alternatingRowStyle: "alt", caption: "Table caption comes here", //displayHeader: false, fillEmptyRows: true,//Below setting is for filling empty rows when page data is not sufficient for displaying emptyRowCellValue: "-", //Default cell value for empty cells mode: WebGridPagerModes.All, firstText: "<< First", previousText: "< Prev", nextText: "Next >", lastText: "Last >>", columns: grid.Columns( put your columns here) )
Place the tags "firstText", "previousText", nexttext and lastText