Click here to Skip to main content
14,575,394 members

Easy Bootstrap Pagination for ASP.NET Gridview

Rate this:
4.73 (14 votes)
Please Sign up or sign in to vote.
4.73 (14 votes)
12 Jan 2019CPOL
Bootstrap pagination for gridview with CSS only

Introduction

This post describes implementing bootstrap pagination for ASP.NET gridview with .table class of bootstrap CSS.

I was recently working with ASP.NET gridview in bootstrap template. Pagination is given in ul li format in bootstrap CSS in .pagination class. But ASP.NET gridview control dynamically takes pagination in a nested table. But after watching closely gridview pagination HTML tags, I found a simple solution.

That is nothing but modifying .table class which we use in gridview. Gridview pagination row is within table and the current page number is kept within span control unlike other page links.

CSS Solutions: Modification of Table Class Not Pagination One

So here is the trick.

Put bootstrap CSS on header.

<link href="css/bootstrap.css" rel="stylesheet" />

Now, we need to modify pager in gridview write CSS rules for .table table - similar to ul li of .pagination class.

Something like this...

Add extra CSS for .table and nested table in it like below. These properties are taken from .pagination CSS.

/*gridview*/
.table table  tbody  tr  td a ,
.table table  tbody  tr  td  span {
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: #337ab7;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
}

.table table > tbody > tr > td > span {
z-index: 3;
color: #fff;
cursor: default;
background-color: #337ab7;
border-color: #337ab7;
}

.table table > tbody > tr > td:first-child > a,
.table table > tbody > tr > td:first-child > span {
margin-left: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}

.table table > tbody > tr > td:last-child > a,
.table table > tbody > tr > td:last-child > span {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}

.table table > tbody > tr > td > a:hover,
.table   table > tbody > tr > td > span:hover,
.table table > tbody > tr > td > a:focus,
.table table > tbody > tr > td > span:focus {
z-index: 2;
color: #23527c;
background-color: #eee;
border-color: #ddd;
}
/*end gridview */

Your gridview pagination class is ready.

Now, put this class in gridview like this:

<asp:GridView ID="GridView1"
CssClass="table table-striped table-bordered table-hover"
   runat="server" PageSize="10"
   AllowPaging="true" ></asp:GridView>

Now, add this code in page load in code view to databind gridview:

DataTable dt = new DataTable();
           dt.Columns.Add("Sl");
           dt.Columns.Add("data");
           dt.Columns.Add("heading1");
           dt.Columns.Add("heading2");
           for (int i = 0; i < 100; i++)
           {
               dt.Rows.Add(new object[] { i ,123*i, 4567*i , 2*i ,  });
           }

           GridView1.DataSource = dt;
           GridView1.DataBind();

Here is the output shown below:

boostrap Gridview pagination without pager style

 

License

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

Share

About the Author

SagSD
Software Developer
India India
I am a software developer .I mainly work on asp.net webform and SQLServer.But I have also done few projects using PHP , Mysql.

Comments and Discussions

 
Suggestionmy vote of 5 Pin
Vladimir Emelyanov13-Apr-18 5:45
MemberVladimir Emelyanov13-Apr-18 5:45 
QuestionWhere's the PageIndexChanging event? Pin
Member 1141014820-Nov-17 11:32
MemberMember 1141014820-Nov-17 11:32 
QuestionGreat but does it keep the Height of the GV the same on last page? Pin
Fandango6822-Mar-17 17:11
MemberFandango6822-Mar-17 17:11 
AnswerRe: Great but does it keep the Height of the GV the same on last page? Pin
SagSD22-Mar-17 17:55
MemberSagSD22-Mar-17 17:55 
GeneralRe: Great but does it keep the Height of the GV the same on last page? Pin
Fandango6822-Mar-17 18:09
MemberFandango6822-Mar-17 18:09 
Thank you for your reply. I've done all that, but I've noticed that the system expects handling of paging from the server-side and suddenly it's lost "control" of how to paginate.
You see adding blank rows is fine, but that has increased the DataTable by x number of blank rows. Try and click another page and suddenly, the whole thing crashes because it does not know what to do with those extra rows.
I have a solution, but it requires heavy use of ViewState variables to hold everything together.
Thanks anyway
GeneralRe: Great but does it keep the Height of the GV the same on last page? Pin
SagSD22-Mar-17 21:22
MemberSagSD22-Mar-17 21:22 
GeneralRe: Great but does it keep the Height of the GV the same on last page? Pin
Fandango689-May-17 13:18
MemberFandango689-May-17 13:18 
GeneralMy vote of 4 Pin
jesusalexis16-Mar-16 5:32
Memberjesusalexis16-Mar-16 5:32 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Tip/Trick
Posted 13 Mar 2016

Stats

95.7K views
1.7K downloads
22 bookmarked