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: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>