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