Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / ASP.NET

GridView Pager Template

5.00/5 (3 votes)
30 Sep 2013CPOL 53.2K  
GridView pager template

I recently created a dynamic data project and needed to change its layout, most things went well until I came to changing the list page. This consisted of a Gridview and standard pager template. I had already started using bootstrap (for ease of use) so wanted to change the table to use bootstrap table classes with its standard pager. After much searching, I managed to get the table outputting correctly using CSS Friendly adapters. However, the pager was a bit lacking.

I had already developed a paging control for a different project and it looked like a fairly simple modification to get it to use the gridview.

The pagers itself is a scrolling window pager with:

  • Optional ‘First/Last’ and ‘Previous/Next’ links with easily changeable text
  • Changeable ’Pager links to show’ setting
  • Easily modifiable HTML output

Simply add the following class into your project:

Gridview pager template class

Reference it in your gridview, this is how my gridview looks:

ASP.NET
<asp:GridView ID="GridView1"
    runat="server"
    DataSourceID="GridDataSource"
    AllowPaging="True"
    AllowSorting="True"
    CssClass="table table-striped"
    AutoGenerateEditButton="True"
    AutoGenerateDeleteButton="True"
    PageSize="5" >
    <PagerTemplate>
        <asp:GridPager ID="GridViewPager1" runat="server"
            ShowFirstAndLast="True"
            ShowNextAndPrevious="True"
            PageLinksToShow="10"
            NextText="›"
            PreviousText="‹"
            FirstText="«"
            LastText="»"/>
    </PagerTemplate>
    <EmptyDataTemplate>
        There are currently no items in this table.
    </EmptyDataTemplate>
</asp:GridView>

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)